vue按钮权限的实现

权限按钮就是不同的用户等级的用户可以进行操作也不同

• 登录成功之后，取到当前用户的权限并存储到状态管理中

  // 用于存储数据
    state: () => ({
        user: new UserInfo(), // 用户信息
        loginInfo: {//用于存储用户账号密码
            username: '',
            password: ''
        }
    }),
    /**
     * 对state数据做一些逻辑操作(用户权限列表)
     * @param state 状态管理的数据
     * @return 权限列表
     */
    getters:{
        permissionList:state=>{//获取用户信息中的perms数据
            return state.user.perms
        }
    },

• 然后在main.ts中定义一个函数(自定义指令),参数1：自定义指令名称，参数2：在钩子函数（挂载之后）传两个参数el和binding，el是绑定指令元素对象，binding是指令所传递的数据

• 获取到状态管理数据

• 然后获取状态管理中存储的用户权限与自定义指令传递过来的值进行判断是否相等，不相等就将节点移除

app.directive("permission", {//参数1：自定义指令名称，参数2：钩子函数
    mounted(el, binding) {//挂载之后 参数1:绑定指令元素对象 参数2：指令所传递的数据
        const store = useUserStore()//获取到状态管理数据
        let values = binding.value//再获取到指定义指令得值(也就是获取到状态管理里面的权限列表)
        let permissionList=store.permissionList || []//[]作用是防止空指针异常
        if(-1===permissionList.indexOf(values)){//判断是否有权限
            el.remove?.()//移除节点
        }
    }
})

• 在按钮中，以v-加上自定义名称来使用，如添加系统指令一样（v-permission自定义指令）

<el-button type="primary" v-permission="'product:groupshop:create'" :icon="Plus" @click="addGroup">添加</el-button>