思路：
- 登录：当用户填写完账号和密码后向服务端验证是否正确，验证通过之后，服务端会返回一个token，拿到token之后（我会将这个token存贮到sessionStorage中，保证刷新页面后能记住用户登录状态），前端会根据token再去拉取一个 user_info 的接口来获取用户的详细信息（如用户权限，用户名等等信息）。
- 权限验证：通过token获取用户对应的 role，自定义指令，获取路由Meta属性里btnPermissions( 注： Meta.btnPermissions是存放按钮权限的数组，在路由表里配置 )，然后判断role是否在btnPermissions数组里，若不在即删除该按钮DOM。
按钮权限也可以用v-if判断，但是如果页面过多，每个页面页面都要获取用户权限role和路由表里的Meta.btnPermissions,然后再做判断，感觉有点麻烦，而自定义指令，只需在权限按钮加入该指令即可。
废话不多说，上代码...
路由配置：
Meta: { btnPermissions: ['admin','supper','normal'] },//页面需要的权限
children: [
{
path: 'supper',component: _import('system/supper'),name: '权限测试页','supper'] } //页面需要的权限
},{
path: 'normal',component: _import('system/normal'),Meta: { btnPermissions: ['admin'] } //页面需要的权限
}
]
自定义指令：
-1) {
isExist = true;
}
return isExist;
};
export {has}
然后在main.js文件引入文件
页面中按钮只需加v-has即可
编辑
结语：
权限这种事需要前后端结合，前端尽可能的去控制，记住：永远不相信用户输入！
以上所述是小编给大家介绍的基于Vue自定义指令实现按钮级权限控制。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。
原文链接：https://www.f2er.com/vue/32189.html