企业官网建设流程全解析

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

使用角色字符串 v-hasRole

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

这是官方给的使用文档

这里做下说明：

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

如下图就是给角色配置的权限字符

使用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}

最后在前端中使用v-hasPermi指令就可以判断当前登录人权限字符中是否包含某些特定的权限字符，就可以判断是否展示使用指令的组件。

前面提到的是前端中的提现，下面说下后端的使用：

在Controller接口上使用@PreAuthorize注解。

权限方法

@PreAuthorize注解用于配置接口要求用户拥有某些权限才可访问，它拥有如下方法

使用示例

其中@ss代表的是PermissionService (opens new window)服务，对每个接口拦截并调用PermissionService的对应方法判断接口调用者的权限。

1. 数据权限示例。

// 符合system:user:list权限要求 @PreAuthorize("@ss.hasPermi('system:user:list')") // 不符合system:user:list权限要求 @PreAuthorize("@ss.lacksPermi('system:user:list')") // 符合system:user:add或system:user:edit权限要求即可 @PreAuthorize("@ss.hasAnyPermi('system:user:add,system:user:edit')")

1. 角色权限示例。

// 属于user角色 @PreAuthorize("@ss.hasRole('user')") // 不属于user角色 @PreAuthorize("@ss.lacksRole('user')") // 属于user或者admin之一 @PreAuthorize("@ss.hasAnyRoles('user,admin')")

权限提示

超级管理员拥有所有权限，不受权限约束。

公开接口

如果有些接口是不需要验证权限可以公开访问的，这个时候就需要我们给接口放行。

使用注解方式，只需要在Controller的类或方法上加入@Anonymous该注解即可

// @PreAuthorize("@ss.xxxx('....')") 注释或删除掉原有的权限注解 @Anonymous @GetMapping("/list") public List<SysXxxx> list(SysXxxx xxxx) { return xxxxList; }

目前数据权限还没有使用过，以后会慢慢学习，一起交流···