裴大头-秦可爱

裴大头-秦可爱

记录一下使用若依的权限使用

发表于 2021-05-21
裴大头
阅读量 287
更新于 2022-11-07

封装了一个指令权限,能简单快速的实现按钮级别的权限判断。v-permission(opens new window)

使用权限字符串 v-hasPermi

// 单个
<el-button v-hasPermi="['system:user:add']">存在权限字符串才能看到</el-button>
// 多个
<el-button v-hasPermi="['system:user:add', 'system:user:edit']">包含权限字符串才能看到</el-button>
js

使用角色字符串 v-hasRole

// 单个
<el-button v-hasRole="['admin']">管理员才能看到</el-button>
// 多个
<el-button v-hasRole="['role1', 'role2']">包含角色才能看到</el-button>
js

这是官方给的使用文档

这里做下说明:

首先角色字符串很好理解首先角色字符串很好理解

如下图就是给角色配置的权限字符 下载.png 使用v-hasRole判断当前角色是否满足条件即可

其次是不好理解的权限字符,这里的权限字符是菜单管理里面配置给页面或者是按钮的权限字符。

这里将页面或者按钮配置上权限字符。 下载 1.png 在角色管理的修改中可以配置菜单或者按钮,也就是将这些页面和按钮的权限字符分配给角色。 image.png 在项目中初始会调用获取权限字符接口,用户会拿到自己的所有权限字符(getInfo()里的permissions就是权限字符数组)。

//这是获取登录人权限标识的sql
SELECT DISTINCT
    m.perms 
FROM
    sys_menu m
    LEFT JOIN sys_role_menu rm ON m.menu_id = rm.menu_id
    LEFT JOIN sys_user_role ur ON rm.role_id = ur.role_id
    LEFT JOIN sys_role r ON r.role_id = ur.role_id 
WHERE
    m.STATUS = '0' 
    AND r.STATUS = '0' 
    AND ur.user_id = #{userId}
sql

最后在前端中使用v-hasPermi指令就可以判断当前登录人权限字符中是否包含某些特定的权限字符,就可以判断是否展示使用指令的组件。 目前数据权限还没有使用过,以后会慢慢学习,一起交流···

评论
来发一针见血的评论吧!
表情

快来发表评论吧~

推荐文章
  • Vue项目代码规范

    1点赞1评论

  • JavaScript 的事件循环机制

    1点赞1评论

  • 聊一聊我的文本编辑器

    1点赞11评论

  • JavaScript的常用遍历方法整理

    1点赞8评论

  • 前端面试精选-基础篇

    1点赞0评论

Crafted with by Pei你看雪

小破站居然运行了 865 天访客 23359

© 2023 Pei你看雪鲁ICP备19037910号-2