源碼：

https://gitee.com/liu-qiang-yyds/sysPermission

一、頁面級

1.1、路由守衛

	前端可以通過路由守衛來判斷用戶是否對某一個頁面有權限，從而阻止用戶進入頁面。

1.2、動態路由

	根據用戶的權限返回對應擁有權限的路由表，然后去循環注冊路由。

二、按鈕級別

2.1、通過v-if來判斷

通過最簡單的辦法v-if條件判斷

2.2、通過組件包裹的方式來判斷

包裹組件

<template><slot v-if="hasPermission"></slot>
</template><script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue';
import eventBus from '../eventBus'; 
// 定義props
const props = defineProps({permission: {type: String,required: true,},
});
// 用戶權限列表
const userPermissions = ref(['sys:user:add','sys:user:edit','sys:user:del']);
// 監聽事件
const handleUserChanged = (permissions) => {userPermissions.value = permissions;// console.log(userPermissions.value);};
// 組件掛載時注冊事件監聽
onMounted(() => {eventBus.on('user-changed', handleUserChanged);
});// 組件卸載時移除事件監聽
onUnmounted(() => {eventBus.off('user-changed', handleUserChanged);
});
// 計算屬性：判斷是否有權限
const hasPermission = computed(() => userPermissions.value.includes(props.permission));</script>

使用

 	<Permission :permission="'sys:user:add'"><el-button type="primary">添加</el-button></Permission><Permission :permission="'sys:user:edit'"><el-button type="success">修改</el-button></Permission><Permission :permission="'sys:user:del'"><el-button type="danger">刪除</el-button></Permission>

2.3、通過自定義指令的方式

自定義組件

import { usePermissionStore } from '../store/permissionStore';
export default{created(el, binding, vnode, prevNode) {// 在綁定元素的attribute或事件監聽器被應用之前調用},mounted(el, binding, vnode, prevNode) {const permissionStore = usePermissionStore();const {permissions} = permissionStoreconsole.log(permissions,'123');// 在綁定元素的父組件被掛載后調用if(!permissions.includes(binding.value)){el.parentNode.removeChild(el);}},updated(el, binding, vnode, prevNode) {// 在包含組件的VNode及其子組件的VNode更新后調用}}

使用

<el-button v-auth="'sys:user:add'" type="primary">添加</el-button><el-button v-auth="'sys:user:edit'"  type="success">修改</el-button><el-button v-auth="'sys:user:del'"  type="danger">刪除</el-button>

三、接口級別

	后端可以寫一個接口白名單，白名單的接口對應著權限的級別，前端用戶的級別小于這個接口的級別，就通過中間件返回給前端一個權限不足的信息