Vue中权限控制的方案

源码：

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} = permissionStore
            console.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>

三、接口级别

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