Vue按钮权限

梦里梦外; 2023-10-09 19:19 58阅读 0赞

按钮权限：通过判断当前用户是否拥有该权限控制当前组件的显示与删除

### 第一步、请求后端数据得到当前用户的所有的按钮权限，类型为数组 ###

![8f73edf4df404708866256be2f497244.png][]

### 第二步、在main.js中注册自定义指令 v-permission ###

![ceba8737a7554a44966ed2f0c9715ce7.png][]

#### 这里通过store.state.ruleNames可以获取到后端传过来的数据 ruleNames,表示当前用户的所有按钮权限。 ####

#### 通过bingding.value可以获取到当前指令绑定的数组, 在hasPermission方法中判断当前值在ruleNames中是否存在，如果存在，则显示该组件，不存在，则删除该组件 ####

![1772f03dbc764c02954473c2e578733e.png][]

打印出来的结果

![2d06b592a54e4044baca7f1442769d68.png][]

#### 第三步、通过在组件中增加指令, v-permission就可以实现该组件在当前用户状态下的显示与隐藏 ####

#### ![750cae3176a64209b3eaace3ea0c3df4.png][] ####

[8f73edf4df404708866256be2f497244.png]: https://img-blog.csdnimg.cn/8f73edf4df404708866256be2f497244.png
[ceba8737a7554a44966ed2f0c9715ce7.png]: https://img-blog.csdnimg.cn/ceba8737a7554a44966ed2f0c9715ce7.png
[1772f03dbc764c02954473c2e578733e.png]: https://img-blog.csdnimg.cn/1772f03dbc764c02954473c2e578733e.png
[2d06b592a54e4044baca7f1442769d68.png]: https://img-blog.csdnimg.cn/2d06b592a54e4044baca7f1442769d68.png
[750cae3176a64209b3eaace3ea0c3df4.png]: https://img-blog.csdnimg.cn/750cae3176a64209b3eaace3ea0c3df4.png

发表评论取消回复

表情：

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

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

相关阅读

相关 Vue按钮权限

按钮权限：通过判断当前用户是否拥有该权限控制当前组件的显示与删除第一步、请求后端数据得到当前用户的所有的按钮权限，类型为数组 ![8f73edf4df40470886

梦里梦外;/ 2023年10月09日 19:19/ 0 赞/ 59 阅读

相关 vue 按钮权限的设置使用自定义指令

index.js: ![在这里插入图片描述][20200115173208953.png] main.js里注册全局指令: ![在这里插入图片描述][20200115

你的名字/ 2023年06月30日 06:59/ 0 赞/ 14 阅读

相关按钮权限问题

![在这里插入图片描述][2019111315314179.png] 三个按钮需要加权限新增按钮的权限: ![在这里插入图片描述][2019111315362449

逃离我推掉我的手/ 2023年06月13日 03:22/ 0 赞/ 25 阅读

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

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

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

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

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

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

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

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

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

相关 vue 按钮权限管理

> 在很多情况下，程序会根据用户的权限，对按钮的显示和隐藏有一定的限制例如：页面上现在有三个按钮（添加，删除，修改），那现在后端返回的是（当前用户只对增加按钮有权限控制）即

叁歲伎倆/ 2022年10月17日 00:41/ 0 赞/ 269 阅读

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

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

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

相关 Vue自定义组件实现按钮权限功能

在这之前请看我上一篇博客[https://blog.csdn.net/qq\_41594146/article/details/83381964][https_blog.csd

ゝ一世哀愁。/ 2022年05月03日 00:28/ 1 赞/ 248 阅读

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

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

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