前端权限之按钮级别控制

Posted on | 阅读数

前言

由于公司新项目需要做全集团组织架构后台管理系统,所以需要做到动态路由树和按钮级别权限。什么?你说为啥这么麻烦？按角色权限不好吗？ 我一个小前端哪有什么话语权… T_T 。

配置篇

1、首先要跟后台约定按钮权限树(用户进入页面 都有哪些按钮权限)

fwejfowehfuowehaui

2、每个页面都有查看、编辑、添加、删除等权限(这些权限分类基本可以 cover 项目需求,不够再加…)

3、登录时获取该用户已有的权限

fejwofhwoeiahfowaehfoweah

4、把得到的按钮权限生成数组,放到sessionstorage中保存

5、定义权限判断指令

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//directives.js
const directives = {
  has: {
    inserted: function(el, binding, vnode) {
      // 获取页面按钮权限
      let _flag = false;
      if (binding.value) {
        _flag = true;
      }

      if (_flag && !Vue.prototype.$_has(binding.value)) {
        el.parentNode.removeChild(el);
      }
    }
  }
};

export default directives;
1
2
//directive/index.js
Vue.directive("has", directive.has);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
//libs/has.js

import { GET_SESSION_STORAGE } from "@/libs/util";
/**
 * @name 按钮权限管理
 *
 * @param {*} Vue
 */
const install = function(Vue) {
  Vue.prototype.$_has = function(value) {
    let _flag = false;
    let btnPermissions = GET_SESSION_STORAGE("btnPermissions");
    if (btnPermissions && btnPermissions.length > 0) {
      // 判断当前传值在权限树中是否存在
      _flag = btnPermissions.indexOf(value) > -1 ? true : false;
    }
    return _flag;
  };
};

export default install;
1
2
3
//main.js
import has from "@/libs/has";
Vue.use(has);

6、页面绑定自定义指令分为两种:一种页面上的按钮、一种组件中的按钮(这种不能使用自定义指令)

第一种、

1
2
3
4
5
6
7
8
9
<button
  type="primary"
  class="search-btn"
  :loading="loading"
  v-has="'Resource-readOnly'"
  @click="handleGetResourceTreeList"
>
  查询
</button>

第二种、

1
2
3
4
5
//这种直接用我们在main.js中写的方法即可
<template v-if="$_has('ResourceManage-edit')">
  <div class="operation-btn" @click="handleTableEdit(scope.row)">编辑</div>
  <div class="operation-btn" @click="handleTableRole(scope.row)">角色关联</div>
</template>

效果预览

首先该用户有页面权限

werfhweoahfoiwae

去掉删除按钮资源绑定的角色

fwefwefwafwaeffwaf

wefwefewafwaegrehge