思路:
登录: 当用户填写完账号和密码后向服务端验证是否正确, 验证通过之后, 服务端会返回一个 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 btnPermissions = vnode.context.$route.meta.btnPermissions.split(",");
- if (!Vue.prototype.$_has(btnPermissions)) {
- 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>
结语:
权限这种事需要前后端结合, 前端尽可能的去控制, 记住: 永远不相信用户输入!
以上所述是小编给大家介绍的基于 Vue 自定义指令实现按钮级权限控制, 希望对大家有所帮助, 如果大家有任何疑问请给我留言, 小编会及时回复大家的. 在此也非常感谢大家对脚本之家网站的支持!
来源: http://www.jb51.net/article/140668.htm