《基于Vue自定义指令实现按钮级权限控制思路详解》由会员分享，可在线阅读，更多相关《基于Vue自定义指令实现按钮级权限控制思路详解（3页珍藏版）》请在金锄头文库上搜索。
1、基于Vue自定义指令实现按钮级权限控制思路详解思路： 登录：当用户填写完账号和密码后向服务端验证是否正确，验证通过之后，服务端会返回一个token，拿到token之后（我会将这个token存贮到sessionStorage中，保证刷新页面后能记住用户登录状态），前端会根据token再去拉取一个 user_info 的接口来获取用户的详细信息（如用户权限，用户名等等信息）。 权限验证：通过token获取用户对应的 role，自定义指令，获取路由meta属性里btnPermissions( 注： meta.btnPermissions是存放按钮权限的数组，在路由表里配置 )，然后判断role是否在
2、btnPermissions数组里，若不在即删除该按钮DOM。按钮权限也可以用v-if判断，但是如果页面过多，每个页面页面都要获取用户权限role和路由表里的meta.btnPermissions,然后再做判断，感觉有点麻烦，而自定义指令，只需在权限按钮加入该指令即可。废话不多说，上代码.路由配置：path: /permission, component: Layout, name: 权限测试, meta: btnPermissions: admin,supper,normal , /页面需要的权限 children: path: supper, component: _import(syst
3、em/supper), name: 权限测试页, meta: btnPermissions: admin,supper /页面需要的权限http:/ , path: normal, component: _import(system/normal), name: 权限测试页, meta: btnPermissions: admin /页面需要的权限 自定义指令：import Vue from vue/*权限指令*/const has = Vue.directive(has, bind: function (el, binding, vnode) / 获取按钮权限http:/ let btnPe
4、rmissions = vnode.context.$route.meta.btnPermissions.split(,); if (!Vue.prototype.$_has(btnPermissions) el.parentNode.removeChild(el); );/ 权限检查方法http:/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即可编辑结语：权限这种事需要前后端结合，前端尽可能的去控制，记住：永远不相信用户输入！
