vue学习011:按钮级权限控制

 

最近做的一个后台系统,要求权限控制到按钮级别,也就是说对于不同的用户,可操作的按钮是不一样的,换言之,有些按钮对某些客户是不可见的.例如:用户A能看到"新增"按钮,而用户B看不到,假设"新增"按钮"的权限是"sys:add",

这里提供两种解决办法:1.定义一个全局方法,配合v-if实现;2.使用自定义指令;(以下详述)

1.定义一个全局方法,配合v-if实现;

在用户登录成功后,获取用户的按钮权限(数组格式),存储到store中

定义公共函数hasPermission

 

在main.js中引入,

在需要的按钮上使用即可

 

2.自定义指令

directives 在全局main.js中注册

路由配置：

{

      path:'/permission',

      component: Layout,

      meta: { btnPermissions: ['admin','supper','normal'] //页面需要的权限

},

自定义指令：

/**权限指令**/

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;   

      }

     returnisExist;

}

export {has};

/*然后在main.js文件引入文件*/

importhas from'./public/js/btnPermissions.js';

/*页面中按钮只需加v-has即可*/

以上,方法一亲测有效,方法二借鉴的,未能实践...

在el.parentNode.removeChild(el)报错，我看了一下，应该是页面没渲染完，el.parentNode是空的。 这个还有顺序要求吗？

 把bind改成inserted/ update /componentUpdated 就解决了