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

基于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.directivJlALjmSe(http://'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 = sessionStorageJlALjmS.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即可

编辑

结语：

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

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

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。