微客导航 » 文章资讯 » 基于Vue自定义指令实现按钮级权限控制思路详解

基于Vue自定义指令实现按钮级权限控制思路详解

2023-09-12 11:59:05 266

思路：

登录：当用户填写完账号和密码后向服务端验证是否正确，验证通过之后，服务端会返回一个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']}//页面需要的权限
}
]

自定义指令：

importVuefrom'vue'
/**权限指令**/
consthas=Vue.directive('has',{
bind:function(el,binding,vnode){
//获取按钮权限
letbtnPermissions=vnode.context.$route.meta.btnPermissions.split(",");
if(!Vue.prototype.$_has(btnPermissions)){
el.parentNode.removeChild(el);
}
}
});
//权限检查方法
Vue.prototype.$_has=function(value){
letisExist=false;
letbtnPermissionsStr=sessionStorage.getItem("btnPermissions");
if(btnPermissionsStr==undefined||btnPermissionsStr==null){
returnfalse;
}
if(value.indexOf(btnPermissionsStr)>-1){
isExist=true;
}
returnisExist;
};
export{has}

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

importhasfrom'./public/js/btnPermissions.js';

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

编辑

结语：

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

以上所述是小编给大家介绍的基于Vue自定义指令实现按钮级权限控制，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！

返回顶部
3162201930
czq8825@qq.com

基于Vue自定义指令实现按钮级权限控制思路详解

热门推荐

随机推荐