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

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

主要介绍了基于vue自定义指令实现按钮级权限控制,本文给大家介绍的非常详细，感兴趣的朋友跟随脚本之家小

编一起学习吧

思路：思路：

登录：当用户填写完账号和密码后向服务端验证是否正确，验证通过之后，服务端会返回一个token，拿到token之后

（我会将这个token存贮到sessionStorage中，保证刷新页面后能记住用户登录状态），前端会根据token再去拉取一个

user_info 的接口来获取用户的详细信息（如用户权限，用户名等等信息）。

权限验证：通过token获取用户对应的 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'] } //页面需要的权限

}

]

自定义指令：自定义指令：

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)) {

let isExist = false;

let btnPermissionsStr = sessionStorage.getItem("btnPermissions");

if (btnPermissionsStr == undefined || btnPermissionsStr == null) {

return false;

}

if (value.indexOf(btnPermissionsStr) > -1) {

isExist = true;

}

return isExist;

};