019-从零搭建微服务-认证中心（八）

写在最前

如果这个项目让你有所收获，记得 Star 关注哦，这对我是非常不错的鼓励与支持。

源码地址（后端）：gitee.com/csps/mingyu...

源码地址（前端）：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

小结

终于可以精细控制后端接口权限了，前端路由也通过后端接口加载了。

接下来我们修改一下用户密码吧，目前还是明文传输，非常的不安全～