广州凡科互联网科技有限公司

营业时间
MON-SAT 9:00-18:00

全国服务热线
4008-888-888

公司门店地址
广州市海珠区工业大道北67号凤凰创意园

小程序商城还有优势_基于Vue自界说指令完成按钮

日期:2021-01-08 浏览:
基于Vue自定义指令实现按钮级权限控制思路详解       这篇文章主要介绍了基于vue自定义指令实现按钮级权限控制,本文给大家介绍的非常详细,感兴趣的朋友跟随凡科小编一起学习吧
登录:当用户填写完账号和密码后向服务端验证是否正确,验证通过之后,服务端会返回一个token,拿到token之后(我会将这个token存贮到sessionStorage中,保证刷新页面后能记住用户登录状态), 的接口来获取用户的 权限验证:通过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自定义指令实现按钮级权限控制,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对凡科网站的支持!




新闻资讯

联系方式丨CONTACT

  • 全国热线:4008-888-888
  • 传真热线:010-88888888
  • Q Q咨询:2639601583
  • 企业邮箱:2639601583@qq.com

首页
电话
短信
联系