Vue~添加按钮权限~通过自定义指令

2022-10-13 299

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： Vue~添加按钮权限~通过自定义指令

Vue~添加按钮权限~通过自定义指令

1、需求

客户：需要把导入、删除权限化；指定人员有权限；

2、思路

后台有一个接口，是可以查询到当前登录人的权限；

前端方案：

1、每到一个页面就请求一次接口是否有权限；（太麻烦了）

2、自定义指令 · Vue.directive；（一次请求，一直用）

3、代码实现

1、自定义指令

创建 /directive/permission/hasPermi 文件
//用来获取权限数据
import store from '@/store'
export default {
  inserted(el, binding, vnode) {
    //获取绑定值
    const { value } = binding
    // TODO 匹配规则，在页面写的要对应这个匹配规则
    const all_permission = "*:*:*";
    //获取用户权限数据
    const permissions = store.getters && store.getters.permissions 
if (value && value instanceof Array && value.length > 0) { 
      //权限标志
      const permissionFlag = value
      //判断用户是否有此权限
      const hasPermissions = permissions.some(permission => {
        console.log('permission', permission);
  return all_permission === permission || permissionFlag.includes(permission)
      })
      //没有权限-移除页面上的控件
      if (!hasPermissions) {{
        console.log('没有权限-移除');
        el.parentNode && el.parentNode.removeChild(el)
      }
    } else { 
      el.parentNode && el.parentNode.removeChild(el)
      throw new Error(`请设置数组操作权限`)
    }
  }
}

2、注册指令

创建 /directive/permission/index文件
import hasPermi from './hasPermi'
import Vue from "vue"
const install = function (Vue) {
  Vue.directive('hasPermi', hasPermi)
}
if (window.Vue) {
  window['hasPermi'] = hasPermi
  Vue.use(install);
}
export default install

3、在main.js里面进行全局注册

import permission from './directive/permission'

Vue.use(permission)

vue官网对指令的解释

https://cn.vuejs.org/v2/guide/custom-directive.html

4、使用方法

<button
           v-has-permi="['btn:pre:del']"
           style="margin-top: 4px"/>
   <button
           v-has-permi="['btn:pre:export']"
           style="margin-top: 4px"/>