014-从零搭建微服务-认证中心（六）

写在最前

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

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

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

文档地址：gitee.com/csps/mingyu…

Token 生成策略

Sa-Token 默认的 token 生成策略是 uuid 风格，其模样类似于：623368f0-ae5e-4475-a53f-93e4225f16ae。 如果你对这种风格不太感冒，还可以将 token 生成设置为其他风格。

// 1. token-style=uuid    —— uuid风格 (默认风格)
"623368f0-ae5e-4475-a53f-93e4225f16ae"
​
// 2. token-style=simple-uuid    —— 同上，uuid风格, 只不过去掉了中划线
"6fd4221395024b5f87edd34bc3258ee8"
​
// 3. token-style=random-32    —— 随机32位字符串
"qEjyPsEA1Bkc9dr8YP6okFr5umCZNR6W"
​
// 4. token-style=random-64    —— 随机64位字符串
"v4ueNLEpPwMtmOPMBtOOeIQsvP8z9gkMgIVibTUVjkrNrlfra5CGwQkViDjO8jcc"
​
// 5. token-style=random-128    —— 随机128位字符串
"nojYPmcEtrFEaN0Otpssa8I8jpk8FO53UcMZkCP9qyoHaDbKS6dxoRPky9c6QlftQ0pdzxRGXsKZmUSrPeZBOD6kJFfmfgiRyUmYWcj4WU4SSP2ilakWN1HYnIuX0Olj"
​
// 6. token-style=tik    —— tik风格
"gr_SwoIN0MC1ewxHX_vfCW3BothWDZMMtx__"

修改 Token 生成策略

本系统后续将使用【随机32位字符串】Token 生成策略

# Sa-Token 配置
sa-token:
    # token 生成设置风格（随机32位字符串）
    token-style: random-32

改造 mingyue-ui 登录登出

登录

signIn: (data: object) => {
  return request({
    url: '/api/auth/login',
    method: 'post',
    data
  });
}

Token 存储

useLoginApi().signIn(state.ruleForm).then(async res => {
    // 存储 token 到浏览器缓存
    Session.set('token', res.data);
    ...
});

登出

signOut: () => {
  return request({
    url: '/api/auth/logout',
    method: 'delete'
  });
}

启动测试

npm run dev

http://localhost:8888/

输入用户名密码，登录成功后查看 Redis 用户信息；登出成功后，查看 Redis 用户信息成功移除即可！

小结

前端登录登出也修改完成啦！目前用户登录还是写死在代码里面，接下来我们编写用户信息接口，通过数据库查询用户信息，并使 mingyue-system 通过 feign 提供给 mingyue-auth 远程调用！