基于Vue自定义指令实现按钮级权限控制的方法-tutorial js-php.cn

基于Vue自定义指令实现按钮级权限控制的方法

不言

Lepaskan： 2018-07-04 11:03:59

asal

2491 orang telah melayarinya

这篇文章主要介绍了基于vue自定义指令实现按钮级权限控制,本文给大家介绍的非常详细，感兴趣的朋友一起学习吧

思路：

登录：当用户填写完账号和密码后向服务端验证是否正确，验证通过之后，服务端会返回一个token，拿到token之后（我会将这个token存贮到sessionStorage中，保证刷新页面后能记住用户登录状态），前端会根据token再去拉取一个 user_info 的接口来获取用户的详细信息（如用户权限，用户名等等信息）。
权限验证：通过token获取用户对应的 role，自定义指令，获取路由meta属性里btnPermissions( 注： meta.btnPermissions是存放按钮权限的数组，在路由表里配置 )，然后判断role是否在btnPermissions数组里，若不在即删除该按钮DOM。

按钮权限也可以用v-if判断，但是如果页面过多，每个页面页面都要获取用户权限role和路由表里的meta.btnPermissions,然后再做判断，感觉有点麻烦，而自定义指令，只需在权限按钮加入该指令即可。

废话不多说，上代码...

路由配置：

path: &#39;/permission&#39;,
  component: Layout,
  name: &#39;权限测试&#39;,
  meta: { btnPermissions: [&#39;admin&#39;,&#39;supper&#39;,&#39;normal&#39;] }, //页面需要的权限
  children: [
   {
    path: &#39;supper&#39;,
    component: _import(&#39;system/supper&#39;),
    name: &#39;权限测试页&#39;,
    meta: { btnPermissions: [&#39;admin&#39;,&#39;supper&#39;] } //页面需要的权限
   },
   {
    path: &#39;normal&#39;,
    component: _import(&#39;system/normal&#39;),
    name: &#39;权限测试页&#39;,
    meta: { btnPermissions: [&#39;admin&#39;] } //页面需要的权限
   }
  ]

Salin selepas log masuk

自定义指令：

import Vue from &#39;vue&#39;
/**权限指令**/
const has = Vue.directive(&#39;has&#39;, {
 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}

Salin selepas log masuk

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

import has from &#39;./public/js/btnPermissions.js&#39;;

Salin selepas log masuk

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

<el-button @click=&#39;editClick&#39; type="primary" v-has>编辑</el-button>

Salin selepas log masuk

结语：

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

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！