vue3 实现按钮权限管理

在做后台管理系统时,经常会有权限管理的功能,这里来记录一下关于按钮权限管理的实现方法

1、自定义指令 v-permission。新建js文件用来写指令代码。

javascript 复制代码
export default function btnPerms(app) {
    app.directive('permission', {
        mounted(el, binding) {
            if (!permsJudge(binding.value)) {
                el.parentNode.removeChild(el);
            }
            function permsJudge(value){
                let perms = JSON.parse(localStorage.getItem('perms')) || [];
                for (let item of perms) {
                    if (item === value) {
                        return true;
                    }
                }
                return false;
            }
        }
    });
}

2、在main.js里注入;

3、在登录后台时获取后端返回的用户权限数据,并且存入到本地;我这边是把获取数据的接口放在vuex中的

javascript 复制代码
async _getUserPermission(contxt,payload){
     let res = await getUserPermission();
     if(res && res.data){
        let {code,data,message} = res.data;
        if(code == 200){
           localStorage.setItem('perms',JSON.stringify(data.resourceList));
           contxt.commit('getPerObj',data.resourceList);
        }else {
           reject(message)
        }
    }
}

然后在登录页面调用这个方法;也可以直接在登录页面获取数据,这里就不赘述了。

获取的数据大概是这个格式

4、在需要判断权限的按钮调用指令;

这样就可以实现按钮权限了,如有问题,欢迎留言!!

相关推荐
奇舞精选4 分钟前
用 AI 提效的新方式:全面体验 Google Gemini CLI
前端·google·ai编程
我命由我1234526 分钟前
Vue 开发问题:Missing required prop: “value“
开发语言·前端·javascript·vue.js·前端框架·ecmascript·js
16年上任的CTO27 分钟前
一文讲清楚React中的key值作用与原理
前端·javascript·react.js·react key
快起来别睡了32 分钟前
Vue 中组件的生命周期与 v-if、v-show 的区别详解
前端·vue.js
阳火锅35 分钟前
在生产环境下,你真的有考虑到使用数组方法的健壮性吗?
前端·javascript·面试
孤月葬花魂1 小时前
JavaScript 中的 Promise API 全面解析
前端·javascript
几道之旅1 小时前
Electron 应用打包全指南
前端·javascript·electron
shushushu1 小时前
Web如何自动播放音视频
前端·javascript
帅夫帅夫1 小时前
前端存储入门:Cookie 与用户登录状态管理
前端·架构
陈随易1 小时前
程序员的新玩具,MoonBit(月兔)编程语言科普
前端·后端·程序员