关于v-action

一、看代码

"v-action"指令的引入部分在框架src/core/directives/action.js文件中。

const action = Vue.directive('action', {
  inserted: function (el, binding, vnode) {
    const actionName = binding.arg // action权限名称
    const roles = store.getters.roles // 当前角色配置
    const elVal = vnode.context.$route.meta.permission // 当前路由的permission配置
//主操作：
    const permissionId = elVal instanceof String && [elVal] || elVal
// 遍历当前用户的permission配置。
    roles.permissions.forEach(p => {
// 如果用户没有当前路由权限，直接跳出。
      if (!permissionId.includes(p.permissionId)) {
        return
      }
// 继续比对用户当前路由权限，如果不存在action权限，则尝试移除或隐藏目标元素。
      if (p.actionList && !p.actionList.includes(actionName)) {
        el.parentNode && el.parentNode.removeChild(el) || (el.style.display = 'none')
      }
    })
  }
})  

二、做修正

看过引入后，可以很简单的注意到我们要加入action的两处位置：roles. permissions[permissionId].actionList和$route.meta.permission。

1. 角色权限

所有必需的角色配置参数是这样的：

store.getter.user => {
  describe: "拥有所有权限",
  id: "admin",
  name: "管理员",
  permissions: [{
    permissionId: "launch",
    permissionName: "投放管理",
    actionEntitySet: [{
      action: "add", // 我想添加的权限
      defaultCheck: false,
      describe: "添加"
    }],
    // actionList 是在src/store/modules/user.js/GetInfo中通过遍历actionEntitySet生成的。
  }],
  // permissionList 是在src/store/modules/user.js/GetInfo中通过遍历permissions生成的。
}

2. 路由权限：

路由权限部分：

 {
        path: '/**********',
        component: PageView,
        redirect: '/**********',
        meta: {
          title: '****管理',
          icon: 'cluster',
          permission: ['launch'] // 坑1:这里的权限设置无法控制v-action
        },
        children: [{
            path: '/**********/:id([1-9]\\d*)?',
            name: '**********',
            component: () => import('@/views/**********'),
            hidden: true,
            meta: {
                title: '**********详情',
                permission: ['launch'] // 坑1：必须在页面路由中重复写入权限才管用
            }
        }]
}

3. 坑：

1. 坑1:
   如果使用v-action的页面路由是默认使用父级路由权限的话，action.js那边的逻辑是查不到的，必须要在使用v-action的页面本身meta中写入permission变量才能找得到。

2. 坑2:
   如果对应的路由权限下没有actionList，原代码会直接放过去（即视为拥有action权限）。所以对此需要稍作修改：

   
   
   image.png

备用方案$auth

实际使用时，也可以选择v-if="$auth('actionName')"的方式。
例如我上文提到的权限，写法就是$auth('launch.add')。

据作者的描述，v-action只是一个方便大家使用的小功能，实际上权限控制问题是并不是框架应该处理的问题。所以如果有更细致的权限控制需求，还是要自己努力想办法啊。