写在最前
如果这个项目让你有所收获,记得 Star 关注哦,这对我是非常不错的鼓励与支持。
源码地址(后端):gitee.com/csps/mingyu...
源码地址(前端):gitee.com/csps/mingyu...
开胃小菜
我们现在已经可以通过登录获取用户拥有的角色和菜单权限,但截止目前还没有给接口增加权限点,本章就是通过给接口增加权限点,精细控制接口权限。
获取当前登录用户全部信息
接口返回如下,这里我们看到
mingyue
拥有system:user:list
权限
json
{
"code": 200,
"msg": "操作成功",
"data": {
"sysUser": {
"userId": 1,
"username": "mingyue",
"nickname": "明月",
"sex": "0",
"password": null,
"phone": "13288888888",
"email": null,
"avatar": null,
"status": "0",
"isDeleted": "0",
"createTime": "2023-07-19T17:06:22",
"updateTime": "2023-07-19T17:06:25",
"createBy": "mingyue",
"updateBy": "mingyue"
},
"menuPermission": [
"system:user:list"
],
"rolePermission": [
"admin"
]
}
}
添加接口权限
通过 获取所有用户信息
接口演示添加接口权限,此时该接口还没有增加权限点拦截,此时我们登录后访问该接口可以正常返回数据。
增加权限点
添加注解
@SaCheckPermission("system:user:list")
less
@GetMapping("list")
@SaCheckPermission("system:user:list")
@Operation(summary = "获取所有用户信息")
public R<List<SysUser>> getSysUsers() {
return R.ok(sysUserService.list());
}
访问测试
我们用户不是拥有
system:user:list
权限点么?为何访问接口报错:无此权限:system:user:list 。因为我们并未告诉 Sa-Token 我们拥有system:user:list
权限点,接下来我们在 Sa-Token 中添加用户拥有的权限点。
json
{
"code": 500,
"msg": "无此权限:system:user:list",
"data": null
}
Sa-Token 添加用户拥有的权限点
1. Sa-Token 权限管理实现
typescript
/**
* Sa-Token 权限管理实现
*
* @author Strive
* @date 2023/8/8 14:54
*/
public class SaPermissionImpl implements StpInterface {
@Override
public List<String> getPermissionList(Object loginId, String loginType) {
LoginUser loginUser = LoginHelper.getLoginUser();
System.out.println(JSONUtil.toJsonStr(loginUser.getMenuPermission()));
return new ArrayList<>(loginUser.getMenuPermission());
}
@Override
public List<String> getRoleList(Object loginId, String loginType) {
LoginUser loginUser = LoginHelper.getLoginUser();
return new ArrayList<>(loginUser.getRolePermission());
}
}
2. Sa-Token 配置注入权限接口实现
typescript
@AutoConfiguration
public class SaTokenConfiguration {
/**
* 权限接口实现(使用bean注入方便用户替换)
*/
@Bean
public StpInterface stpInterface() {
return new SaPermissionImpl();
}
}
再次访问测试
此时接口已经可以访问啦,快试试吧!
json
{
"code": 200,
"msg": "操作成功",
"data": [
{
"userId": 1,
"username": "mingyue",
"nickname": "明月",
"sex": "0",
"password": "123456",
"phone": "13288888888",
"email": null,
"avatar": null,
"status": "0",
"isDeleted": "0",
"createTime": "2023-07-19T17:06:22",
"updateTime": "2023-07-19T17:06:25",
"createBy": "mingyue",
"updateBy": "mingyue"
},
... ...
]
}
MingYue-UI 替换后端菜单
修改路由控制
修改
themeConfig.ts
配置文件切换后端接口加载路由菜单true:开启后端控制路由
false:开启前端控制路由
arduino
// 是否开启后端控制路由
isRequestRoutes: true,
更新路由接口
mingyue-ui/src/api/menu/index.ts
csharp
getMenu: (params?: object) => {
return request({
url: '/api/system/sysMenu/getRouters',
method: 'get',
params,
});
}
数据脚本
更新菜单数据,数据源:docker/mysql/mingyue.sql
小结
终于可以精细控制后端接口权限了,前端路由也通过后端接口加载了。
接下来我们修改一下用户密码吧,目前还是明文传输,非常的不安全~