封装了一个指令权限，能简单快速的实现按钮级别的权限判断。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

这是官方给的使用文档

这里做下说明：

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

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

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

这里将页面或者按钮配置上权限字符。 在角色管理的修改中可以配置菜单或者按钮，也就是将这些页面和按钮的权限字符分配给角色。 在项目中初始会调用获取权限字符接口，用户会拿到自己的所有权限字符（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指令就可以判断当前登录人权限字符中是否包含某些特定的权限字符，就可以判断是否展示使用指令的组件。 目前数据权限还没有使用过，以后会慢慢学习，一起交流···