vue实现前端按钮组件权限管理

目录
  • 方案1:数组+自定义指令
    • 关于路由权限
  • 方案2: 二进制
    • 表达权限:
    • 权限判断
    • 判断和使用
  • 小结

方案1:数组+自定义指令

把权限放到数组中,通过vue的自定义指令来判断是否拥有该权限,有则显示,反之则不显示

我们可以把这个按钮需要的权限放到组件上

<el-button
  v-hasPermi="['home:advertising:update']"
>新建</el-button>

自定义指令:

逻辑就是我们在登陆后会获取该用户的权限,并存储到localStorage中,当一个按钮展示时会判断localStorage存储的权限列表中是否存在该按钮所需的权限。

/**
 * 权限处理
 */
​
export default {
  inserted(el, binding, vnode) {
    const { value } = binding;
    const SuperPermission = "superAdmin"; // 超级用户,用于开发和测试
    const permissions = localStorage.getItem('userPermissions')&& localStorage.getItem('userPermissions').split(',');
    // 判断传入的组件权限是否符合要求
    if (value && value instanceof Array && value.length > 0) {
      const permissionFlag = value;
      const hasPermissions = permissions && permissions.some(permission => all_permission === permission || permissionFlag.includes(permission));
      // 判断是否有权限是否要展示
      if (!hasPermissions) {
        el.parentNode && el.parentNode.removeChild(el);
      }
    } else {
      throw new Error(`请设置操作权限标签值`);
    }
  },
};

注册权限

import Vue from 'vue';
import Vpermission from "./permission";
// 按钮权限 自定义指令
Vue.directive('permission', Vpermission);

关于路由权限

数组的方案也可以用到菜单权限上,可以在路由的meta中携带该路由所需的权限,例如:

const router = [{
  path: 'needPermissionPage',
  name: 'NeedPermissionPage',
  meta: {
    role: ['permissionA', 'permissionB'],
  },
}]

这个时候就需要在渲染权限的时候动态渲染了,该方案可以看一下其他的文章或成熟的项目,写的非常好

方案2: 二进制

通过二进制来控制权限:

假设我们有增删改查四个基本权限:

const UPDATE = 0b000001;
const DELETE = 0b000010;
const ADD = 0b000100;
const SEARCH = 0b001000;

每一位代表是否有该权限,有该权限则是1,反之是0

表达权限:

我们可以使用或运算来表达一个权限结果,或运算:两个任何一个为1,结果就为1

const reslut = UPDATE | DELETE | SEARCH;
console.log(reslut);  // 11

变成了十进制,我们可以通过toString方法变为二进制结果

const reslut = UPDATE | DELETE | SEARCH;
console.log(reslut.toString(2));  // 1011

result 这个结果就代表我们既拥有更新权限,同时也拥有删除和查询的权限

那么我们可以将十进制的reslut当作该用户的权限,把这个结果给后台,下次用户登陆后只需要返回这个结果就可以了。

权限判断

我们了解了如何表达一个权限,那如何做权限的判断呢?

可以通过且运算,且运算:两位都为1,这一位的结果才是1。

还是用上面的结果,当我们从接口中拿到了reslut,判断他是否有 DELETE 权限:

console.log((reslut & DELETE) === DELETE);  // true

是否有新增的权限

console.log((result & ADD) === ADD); // false

判断和使用

/**
 * 接受该组件所需的权限,返回用户权限列表是否有该权限
 * @param {String} permission
 * @returns {Boolean}
 */
function hasPermission(permission) {
  const permissionList = {
    UPDATE: 0b000001,
    DELETE: 0b000010,
    CREATE: 0b000100,
    SEARCH: 0b001000
  }
  let btnPermission = permissionList[permission] ? permissionList[permission] : -1;
  if (btnPermission === -1) return false;
  const userPermission = localStorage.getItem('userPermissions');
  // 将本地十进制的值转换为二进制
  const userPermissionBinary = userPermission.toString(2);
  // 对比组件所需权限和本地存储的权限
  return (userPermissionBinary & btnPermission) === btnPermission;
}

直接在组件中通过v-show/v-if来控制是否展示

<el-button v-show="hasPermission('UPDATE')">更新</el-button>

小结

我理解来说,对于方案1来说,方案2的优势在于更简洁,后台仅需要存储一个十进制的值,但如果后期新增需求更新了新的权限,可能需要调整二进制的位数来满足业务需求。方案1的优势在于更加易懂,新增权限时仅需要更新组件自定义指令的数组。

以上就是vue实现前端按钮组件权限管理的详细内容,更多关于vue 前端按钮组件权限的资料请关注我们其它相关文章!

(0)

相关推荐

  • 前端实现滑动按钮AJAX与后端交互的示例代码

    目录 html代码 css代码 效果图 JS事件触发 flask后端接口 参考链接 html代码 <div class="switch-box"> <input id="switchButton" type="checkbox" class="switch" /> <label for="switchButton"></label> </div>

  • Vue 指令实现按钮级别权限管理功能

    在项目中经常有需求要根据用户的权限对界面上的元素进行控制,这里介绍了一直简单的实现,仅供参考. 当前用户的权限列表储存在 store 里,也可以是其他地方. 指令 // src/directives/permission.js import Vue from 'vue'; import store from '@/store'; import {get} from '@/utils'; // 是否有权限 const hasPermission = userPermission => { let

  • 精确到按钮级别前端权限管理实现方案

    目录 这是产品提出的要求: 旧的按钮权限控制: 解决方案构思: 方案优化 具体实现核心代码 这是产品提出的要求: 页面上的每一个按钮,都要可以通过角色权限来控制 当时的项目背景是一个零售系统的后台管理,所以会涉及到运营.厂家.管理员等等很多角色的使用,而其中许多数据是敏感的,例如销量,单价,利润等.前期的权限仅限于菜单级别的控制,也就是可以通过配置实现可以控制某个角色只显示某些菜单,这也是比较常规的权限处理方案——没权限就不让你看那个页面呗~ 旧的按钮权限控制: //按钮根据角色写死是否有权限,

  • 详解VUE前端按钮权限控制

    在用户登陆后,根据用户id读取用户的所有权限数据,放入本地的storage进行存储,之后,定义指令,如果用户含有此按钮权限,则在页面显示出来: /**权限指令**/ Vue.directive('has', { bind: function(el, binding) { if (!Vue.prototype.$_has(binding.value)) { el.parentNode.removeChild(el); } } }); //权限检查方法 Vue.prototype.$_has = f

  • vue实现前端按钮组件权限管理

    目录 方案1:数组+自定义指令 关于路由权限 方案2: 二进制 表达权限: 权限判断 判断和使用 小结 方案1:数组+自定义指令 把权限放到数组中,通过vue的自定义指令来判断是否拥有该权限,有则显示,反之则不显示 我们可以把这个按钮需要的权限放到组件上 <el-button v-hasPermi="['home:advertising:update']" >新建</el-button> 自定义指令: 逻辑就是我们在登陆后会获取该用户的权限,并存储到localS

  • Vue管理系统前端之组件拆分封装详解

    组件封装 在上一篇记录中,首页中有太多的代码,为了避免代码的臃肿,需要对主要的功能模块拆分,来让代码看起来更简洁,且能进行复用. 拆分后还加了些小功能,加入了修改 title 的代码,修改方式参考vue 动态修改 title. 还增加了当前请求的页面缓存,使用状态管理器处理.监听路由,保存到 state 中,来处理的. 如何监听可参考vue 计算属性和监听属性. 完整效果图如下: 首页布局拆分后结构 拆分后的,布局结构图: 拆分后代码 布局最外层 index 代码,使用头部,侧边栏,主内容栏组成

  • vue 开发一个按钮组件的示例代码

    最近面试,被问到一个题目,vue做一个按钮组件: 当时只是说了一下思路,回来就附上代码. 解决思路: 通过父子组件通讯($refs 和 props) props接受参数, $refs调用子组件的方法 来达到点击提交改变按钮状态,如果不成功则取消按钮状态 在src/components/ 下建一个button.vue <template> <!-- use plane --> <!-- 传入bgColor改变按钮背景色 --> <!-- state切换button的

  • 基于vue实现网站前台的权限管理(前后端分离实践)

    Javascript做为当下的热门语言,用途很广泛,从前端到后端处处可见其存在,该技术如今在我们项目内部也大量使用来开发诸如CMS系统以及其他其他一些数据分析系统的前端页面,为此个人非常感兴趣并将其作为帽子卡的扩展内容来进行课余学习. Javascript框架鳞次栉比,但基本原理大致相同,因此选用国内人开发的vue.js进行一个初步的尝试.学习vue.js也一周多的时间了,说起vue的主要用法,无外乎Declarative Rendering.Component System.Client-si

  • vue自定义封装按钮组件

    vue按钮组件的自定义封装代码,供大家参考,具体内容如下 封装按钮组件 button.vue <template> <button class="button ellipsis" :class="[size,type]"> <slot /> </button> </template> <script> export default { name: 'Button', props: { size:

  • Vue波纹按钮组件制作

    先说一下用法: <zk-button class="btn btn-default">默认按钮</zk-button> <zk-button class="btn btn-default btn-round">默认按钮</zk-button> <zk-button class="btn btn-default btn-round" :speed="4" :opacity=&

  • 动态加载权限管理模块中的Vue组件

    本文我们主要来聊聊登录以及组件的动态加载. 登录状态保存 当用户登录成功之后,需要将当前用户的登录信息保存在本地,方便后面使用.具体实现如下: 登录成功保存数据 在登录操作执行成功之后,通过commit操作将数据提交到store中,核心代码如下: this.postRequest('/login', { username: this.loginForm.username, password: this.loginForm.password }).then(resp=> { if (resp &

  • Vue Element前端应用开发之功能点管理及权限控制

    目录 概述 1.权限功能点管理 2.VUE+Element 前端权限控制 概述 本篇随笔介绍功能点管理及权限控制,功能点是作为一个业务对象数据进行管理,在角色范畴上进行分配,而在界面元素控制上,VUE+Element 前端引入Vue自定义指令Directives进行控制. 1.权限功能点管理 我们在前面分析过一个权限系统的表和关系的说明,如下所示. 权限功能点的管理就是对TB_Function的表的管理操作,这个表是我们定义用于系统控制的功能点. 权限功能点的管理为了展示它的树状结果,包括树列表

随机推荐