基于Vue自定义指令实现按钮级权限控制思路详解思路：登录：当用户填写完账号和密码后向服务端验证是否正确，验证通过之后，服务端会返回一个tok
en，拿到token之后（我会将这个token存贮到sessionStorage中，保证刷新页面后能记住用户登录状态），前端会根据
token再去拉取一个user_info的接口来获取用户的详细信息（如用户权限，用户名等等信息）。权限验证：通过token获取
用户对应的role，自定义指令，获取路由meta属性里btnPermissions(注：meta.btnPermission
s是存放按钮权限的数组，在路由表里配置)，然后判断role是否在btnPermissions数组里，若不在即删除该按钮DOM。按
钮权限也可以用v-if判断，但是如果页面过多，每个页面页面都要获取用户权限role和路由表里的meta.btnPermission
s,然后再做判断，感觉有点麻烦，而自定义指令，只需在权限按钮加入该指令即可。废话不多说，上代码...路由配置：path:''/pe
rmission'',component:Layout,name:''权限测试'',meta:{btnPermission
s:[''admin'',''supper'',''normal'']},//页面需要的权限children:[{path:''
supper'',component:_import(''system/supper''),name:''权限测试页'',meta
:{btnPermissions:[''admin'',''supper'']}//页面需要的权限http://www.leta
oqpyx.com},{path:''normal'',component:_import(''system/normal''
),name:''权限测试页'',meta:{btnPermissions:[''admin'']}//页面需要的权限}
]自定义指令：importVuefrom''vue''/权限指令/consthas=Vue.directive(
''has'',{bind:function(el,binding,vnode){//获取按钮权限http://ww
w.44226.netletbtnPermissions=vnode.context.$route.meta.btnPer
missions.split(",");if(!Vue.prototype.$_has(btnPermissions)){
el.parentNode.removeChild(el);}}});//权限检查方法http://www.ff787.co
mVue.prototype.$_has=function(value){letisExist=false;le
tbtnPermissionsStr=sessionStorage.getItem("btnPermissions");i
f(btnPermissionsStr==undefined||btnPermissionsStr==null){
returnfalse;}if(value.indexOf(btnPermissionsStr)>-1){isE
xist=true;}returnisExist;};export{has}然后在main.js文件引入文件impor
thasfrom''./public/js/btnPermissions.js'';页面中按钮只需加v-has即可ton@click=''editClick''type="primary"v-has>编辑结语：权限这种事需要前后端结合，前端尽可能的去控制，记住：永远不相信用户输入！ |
|
