Vue自定义指令实现按钮级权限控制功能

思路：

登录：当用户填写完账号和密码后向服务端验证是否正确，验证通过之后，服务端会返回一个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', {

　　// 当被绑定的元素插入到 DOM 中时……

　　inserted: function (el, binding, vnode) {

　　let btnPermissions = '';

　　// 获取指令按钮权限

　　let characteristic = binding.value;

　　if (characteristic) btnPermissions = characteristic;

　　// 获取路由按钮权限

　　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;

 }
 let res = value.filter((x) => {
 　　return btnPermissionsStr.include(x)
 })

 if (res.length > 0) isExist = truereturn 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自定义指令实现按钮级权限控制功能

最新文章

热门文章