Vue.directive指令实现按钮级别权限控制

╰半夏微凉° 2022-11-14 11:55 225阅读 0赞

新建 role.js 文件

import Vue from 'vue';
    // 获取用户角色, 可以从cookie中获取
    
    function getRole() { 
      return ['admin']
    }
    
    // 校验用户权限，传入一个数组
    function authority(role) { 
      return getRole().includes(role[0])
      // return role.includes(getRole())
    }
    
    // 注册一个全局自定义指令 `v-role`
    Vue.directive('role', { 
      inserted: (el, binding, vnode) => { 
        // 如果没有权限就移除此节点
        if (!authority(binding.value)) { 
          el.parentNode.removeChild(el);
        }
      }
    })
    export default authority

在main.js 引入role文件  
import role from ‘./utils/role.js’

Vue.use(role )

<template>
      <div>
        <div v-role="['user', 'admin', 'superAdmin']">user</div>
        <div v-role="['admin', 'superAdmin']">admin</div>
        <div v-role="['superAdmin']">superAdmin</div>
      </div>
    </template>

当 v-role="\[‘user’, ‘admin’, ‘superAdmin’\]" 时  
在getRole 函数有对应的 admin 匹配 ， 则当前的线索

喜欢的可以关注 前段面试题小程序， MST题库 ，大量面试题免费看  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjk4MTU2MA_size_16_color_FFFFFF_t_70_pic_center]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjk4MTU2MA_size_16_color_FFFFFF_t_70_pic_center]: /images/20221022/3b437425885d4043b07d64579f693c72.png

发表评论取消回复

表情：

评论列表（有 0 条评论，225人围观）

还没有评论，来说两句吧...

相关阅读

相关 Shiro权限控制(六):Shiro按钮权限控制

一、前言前段时间一直在研究如何通过标签方式控制控制的权限，我用HTML做页面的渲染，Shiro标签在HTML中不生效，但还是想用Shiro标签方式控制页面的按钮，有权限则

曾经终败给现在/ 2023年06月04日 09:54/ 0 赞/ 217 阅读

相关面试官：Vue要做权限管理该怎么做？控制到按钮级别的权限怎么做？

![format_png][] 一、是什么权限是对特定资源的访问许可，所谓权限控制，也就是确保用户只能访问到被分配的资源而前端权限归根结底是请求的发起权，请求的发

朱雀/ 2023年01月03日 12:44/ 0 赞/ 213 阅读

相关面试官：Vue要做权限管理该怎么做？控制到按钮级别的权限怎么做？

![format_png][] 一、是什么权限是对特定资源的访问许可，所谓权限控制，也就是确保用户只能访问到被分配的资源而前端权限归根结底是请求的发起权，请求的发

╰半夏微凉°/ 2023年01月02日 05:30/ 0 赞/ 164 阅读

相关 vue-element-admin 按钮级别的权限判断

> vue-element-admin 按钮级别的权限判断 > > 参照官网进行创建权限控制js > > [https://panjiachen.github.io/vue

雨点打透心脏的1/2处/ 2022年12月22日 08:46/ 0 赞/ 207 阅读

相关 Vue.directive指令实现按钮级别权限控制

新建 role.js 文件 import Vue from 'vue'; // 获取用户角色, 可以从cookie中获取 function

╰半夏微凉°/ 2022年11月14日 11:55/ 0 赞/ 226 阅读

相关 vue 菜单级别权限控制实现

之前写了一篇 [《vue 按钮级别权限控制实现》][vue]，里面介绍了前端页面对于按钮权限的控制，这一篇来说说前端页面对于菜单权限的控制。前端菜单权限，就是根据用户的权限

àì夳堔傛蜴生んèń/ 2022年11月04日 11:12/ 0 赞/ 183 阅读

相关 vue 按钮级别权限控制实现

总结一下前端对于按钮级别权限的控制方法，根据后端返回的权限数据来实现不同权限的用户展示不同的操作按钮。实现方法有两种：定义一个全局方法配合 v-if 指令；自定义指令。首先

清疚/ 2022年10月27日 12:21/ 0 赞/ 239 阅读

相关 vue实现按钮功能级权限控制

合适的位置接口获取权限信息，比如登录接口 \\\\这里简化了代码\\\\\\ function \_queryPermissionList(to, next) \{

た入场券/ 2022年09月10日 03:24/ 0 赞/ 188 阅读

相关 php实现权限控制

在说权限管理模块前，应该先知道权限管理模块要有哪些功能：　　1、用户只能访问，指定的控制器，指定的方法　　2、用户可以存在于多个用户组里　　3、用户组可以选择，指定

布满荆棘的人生/ 2022年05月29日 08:12/ 0 赞/ 184 阅读

相关 vue路由权限控制addRoutes，按钮级别控制

vue中路由权限一般用addRoutes实现 1.新建route文件夹index.js文件 import Vue from 'vue' import Rou

阳光穿透心脏的1/2处/ 2021年09月03日 09:52/ 0 赞/ 468 阅读