Vue自定义指令实现按钮级权限控制功能

路由权限可参考这位大神写的，很全面==>手摸手，带你用vue撸后台 系列二(登录权限篇)

思路：

• 登录：当用户填写完账号和密码后向服务端验证是否正确，验证通过之后，服务端会返回一个token，拿到token之后（我会将这个token存贮到sessionStorage中，保证刷新页面后能记住用户登录状态），前端会根据token再去拉取一个 user_info 的接口来获取用户的详细信息（如用户权限，用户名等等信息）。
• 权限验证：通过token获取用户对应的 role，自定义指令，获取路由meta属性里btnPermissions(注： meta.btnPermissions是存放按钮权限的数组，在路由表里配置)，然后判断role是否在btnPermissions数组里，若不在即删除该按钮DOM。

按钮权限也可以用v-if判断，但是如果页面过多，每个页面页面都要获取用户权限role和路由表里的meta.btnPermissions,然后再做判断，感觉有点麻烦，而自定义指令，只需在权限按钮加入该指令即可。

废话不多说，上代码...

路由配置：

    path: '/permission',
    component: Layout,
    name: '权限测试',
    meta: { btnPermissions: ['admin','supper','normal'] }, //页面需要的权限
    children: [
        {
            path: 'supper',
            component: _import('system/supper'),
            name: '权限测试页',
            meta: { btnPermissions: ['admin','supper'] }  //页面需要的权限
        },
        {
            path: 'normal',
            component: _import('system/normal'),
            name: '权限测试页',
            meta: { btnPermissions: ['admin'] }  //页面需要的权限
        }
    ]

自定义指令：

    import Vue from 'vue'
    
    /**权限指令**/
    const has = Vue.directive('has', {
        bind: function (el, binding, vnode) {
            // 获取页面按钮权限
            let btnPermissionsArr = [];
            if(binding.value){
                // 如果指令传值，获取指令参数，根据指令参数和当前登录人按钮权限做比较。
                btnPermissionsArr = Array.of(binding.value);
            }else{
                // 否则获取路由中的参数，根据路由的btnPermissionsArr和当前登录人按钮权限做比较。
                btnPermissionsArr = vnode.context.$route.meta.btnPermissions;
            }
            if (!Vue.prototype.$_has(btnPermissionsArr)) {
                el.parentNode.removeChild(el);
            }
        }
    });
    // 权限检查方法
    Vue.prototype.$_has = function (value) {
        let isExist = false;
        // 获取用户按钮权限
        let btnPermissionsStr = sessionStorage.getItem("btnPermissions");
        if (btnPermissionsStr == undefined || btnPermissionsStr == null) {
            return false;
        }
        if (value.indexOf(btnPermissionsStr) > -1) {
            isExist = true;
        }
        return isExist;
    };
    export {has}

然后在main.js文件引入文件

import has from './public/js/btnPermissions.js';

复制代码

页面中按钮只需加v-has即可

<el-button @click='editClick' type="primary" v-has>编辑</el-button>

复制代码

结语：

权限这种事情需要前后端结合，前端尽可能的去控制，更多的需要后台判断。记住：永远不相信用户输入！

以上有不足的地方

作者：Coder_lixc
链接：https://juejin.im/post/5b03d7756fb9a07aa0485856
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。