源码：

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>

三、接口级别

	后端可以写一个接口白名单，白名单的接口对应着权限的级别，前端用户的级别小于这个接口的级别，就通过中间件返回给前端一个权限不足的信息