前后端分离架构下使用 Sa-Token 完成登录认证

最新推荐文章于 2024-09-29 10:21:01 发布

shengzhang_

最新推荐文章于 2024-09-29 10:21:01 发布

阅读量1.9k

点赞数 1

分类专栏： sa-token专栏文章标签： java spring boot sa-token 登录认证前后端分离

本文链接：https://blog.csdn.net/shengzhang_/article/details/131053576

版权

sa-token专栏专栏收录该内容

24 篇文章 34 订阅

订阅专栏

文章介绍了Sa-Token，一个为前后端分离架构设计的Java轻量级权限认证框架，如何在Springboot项目中使用它进行登录认证。在无Cookie模式下，通过后端返回Token给前端，前端再将其放入请求头中，实现鉴权流程。此外，还提到了自定义Token前缀和风格以及生成策略的配置方法。

摘要由CSDN通过智能技术生成

一、架构分析

目前绝大多数系统都已经采用 “前后端分离” 架构来设计了，传统的Session模式鉴权也不再适合这种架构（或者需要额外写很多的代码来专门适配）。

Sa-Token 是一个 java 轻量级权限认证框架，专为前后端分离架构打造，主要解决登录认证、权限认证、单点登录、OAuth2、微服务网关鉴权等一系列权限相关问题。

Gitee 开源地址：https://gitee.com/dromara/sa-token

本文将介绍在 Springboot 架构下的前后端分离项目，如何使用 Sa-Token 方便的完成登录认证。

首先在项目中引入 Sa-Token 依赖：

<!-- Sa-Token 权限认证 -->
<dependency>
    <groupId>cn.dev33</groupId>
    <artifactId>sa-token-spring-boot-starter</artifactId>
    <version>1.34.0</version>
</dependency>

注：如果你使用的是 SpringBoot 3.x，只需要将 sa-token-spring-boot-starter 修改为 sa-token-spring-boot3-starter 即可。

二、无 Cookie 模式

无 Cookie 模式：特指不支持 Cookie 功能的终端，通俗来讲就是我们常说的 —— 前后端分离模式。

常规 Web 端鉴权方法，一般由 Cookie模式 完成，而 Cookie 有两个特性：

可由后端控制写入。
每次请求自动提交。

这就使得我们在前端代码中，无需任何特殊操作，就能完成鉴权的全部流程（因为整个流程都是后端控制完成的）

而在app、小程序等前后端分离场景中，一般是没有 Cookie 这一功能的，此时大多数人都会一脸懵逼，咋进行鉴权啊？

见招拆招，其实答案很简单：

不能后端控制写入了，就前端自己写入。（难点在后端如何将 Token 传递到前端）
每次请求不能自动提交了，那就手动提交。（难点在前端如何将 Token 传递到后端，同时后端将其读取出来）

三、后端将 token 返回到前端

首先调用 StpUtil.login(id) 进行登录。
调用 StpUtil.getTokenInfo() 返回当前会话的 token 详细参数。
- 此方法返回一个对象，其有两个关键属性：tokenName和tokenValue（token 的名称和 token 的值）。
- 将此对象传递到前台，让前端人员将这两个值保存到本地。

代码示例：

// 登录接口
@RequestMapping("doLogin")
public SaResult doLogin() {
	// 第1步，先登录上 
	StpUtil.login(10001);
	// 第2步，获取 Token  相关参数 
	SaTokenInfo tokenInfo = StpUtil.getTokenInfo();
	// 第3步，返回给前端 
	return SaResult.data(tokenInfo);
}

四、前端将 token 提交到后端

无论是app还是小程序，其传递方式都大同小异。
那就是，将 token 塞到请求header里，格式为：{tokenName: tokenValue}。
以经典跨端框架 uni-app 为例：

方式1，简单粗暴

// 1、首先在登录时，将 tokenValue 存储在本地，例如：
uni.setStorageSync('tokenValue', tokenValue);

// 2、在发起ajax请求的地方，获取这个值，并塞到header里 
uni.request({
	url: 'https://www.example.com/request', // 仅为示例，并非真实接口地址。
	header: {
		"content-type": "application/x-www-form-urlencoded",
		"satoken": uni.getStorageSync('tokenValue')		// 关键代码, 注意参数名字是 satoken 
	},
	success: (res) => {
		console.log(res.data);	
	}
});

方式2，更加灵活

// 1、首先在登录时，将tokenName和tokenValue一起存储在本地，例如：
uni.setStorageSync('tokenName', tokenName); 
uni.setStorageSync('tokenValue', tokenValue); 

// 2、在发起ajax的地方，获取这两个值, 并组织到head里 
var tokenName = uni.getStorageSync('tokenName');	// 从本地缓存读取tokenName值
var tokenValue = uni.getStorageSync('tokenValue');	// 从本地缓存读取tokenValue值
var header = {
	"content-type": "application/x-www-form-urlencoded"
};
if (tokenName != undefined && tokenName != '') {
	header[tokenName] = tokenValue;
}

// 3、后续在发起请求时将 header 对象塞到请求头部 
uni.request({
	url: 'https://www.example.com/request', // 仅为示例，并非真实接口地址。
	header: header,
	success: (res) => {
		console.log(res.data);	
	}
});

只要按照如此方法将token值传递到后端，Sa-Token 就能像传统PC端一样自动读取到 token 值，进行鉴权。
你可能会有疑问，难道我每个ajax都要写这么一坨？岂不是麻烦死了？
- 你当然不能每个 ajax 都写这么一坨，因为这种重复性代码都是要封装在一个函数里统一调用的。

其它解决方案：

如果你对 Cookie 非常了解，那你就会明白，所谓 Cookie ，本质上就是一个特殊的header参数而已，
而既然它只是一个 header 参数，我们就能手动模拟实现它，从而完成鉴权操作。

这其实是对无Cookie模式的另一种解决方案，有兴趣的同学可以百度了解一下，在此暂不赘述。

五、代码对比

为了更加直观的显示出前后端一体架构和前后端分离架构的差异，此处再提供一个示例：

package com.pj.cases.up;

import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import cn.dev33.satoken.stp.SaTokenInfo;
import cn.dev33.satoken.stp.StpUtil;
import cn.dev33.satoken.util.SaResult;

/**
 * Sa-Token 前后端分离模式示例 
 * 
 * @author kong
 * @since 2022-10-17 
 */
@RestController
@RequestMapping("/NotCookie/")
public class NotCookieController {

	// 前后端一体模式的登录样例    ---- http://localhost:8081/NotCookie/doLogin?name=zhang&pwd=123456
	@RequestMapping("doLogin")
	public SaResult doLogin(String name, String pwd) {
		if("zhang".equals(name) && "123456".equals(pwd)) {
			// 会话登录 
			StpUtil.login(10001);
		    return SaResult.ok();
		}
		return SaResult.error("登录失败");
	}
	
	// 前后端分离模式的登录样例    ---- http://localhost:8081/NotCookie/doLogin2?name=zhang&pwd=123456
	@RequestMapping("doLogin2")
	public SaResult doLogin2(String name, String pwd) {
		
		if("zhang".equals(name) && "123456".equals(pwd)) {
			
			// 会话登录 
			StpUtil.login(10001);
			
			// 与常规登录不同点之处：这里需要把 Token 信息从响应体中返回到前端 
			SaTokenInfo tokenInfo = StpUtil.getTokenInfo();
		    return SaResult.data(tokenInfo);
		}
		return SaResult.error("登录失败");
	}
	
}

接口一：Token 将在 Cookie 上下文返回到前端，并由浏览器每次请求时自动提交，这种模式适合前后端一体的架构。
接口二：Token 将在响应 body 里返回到前端，并由前端手动存储，并手动在每次请求时提交，这种模式适合前后端分离的架构。

六、自定义 Token 提交的前缀

在某些系统中，前端提交token时会在前面加个固定的前缀，例如：

{
	"satoken": "Bearer xxxx-xxxx-xxxx-xxxx"
}

此时后端如果不做任何特殊处理，框架将会把Bearer 视为token的一部分，无法正常读取token信息，导致鉴权失败。

为此，我们需要在yml中添加如下配置：

sa-token: 
	# token前缀
	token-prefix: Bearer

此时 Sa-Token 便可在读取 Token 时裁剪掉 Bearer，成功获取xxxx-xxxx-xxxx-xxxx。

注意点：

Token前缀与 Token值之间必须有一个空格。
一旦配置了 Token前缀，则前端提交 Token 时，必须带有前缀，否则会导致框架无法读取 Token。
由于Cookie中无法存储空格字符，也就意味配置 Token 前缀后，Cookie 鉴权方式将会失效，此时只能将 Token 提交到header里进行传输。

七、自定义 Token 风格

Sa-Token默认的token生成策略是uuid风格，其模样类似于：623368f0-ae5e-4475-a53f-93e4225f16ae。

如果你对这种风格不太感冒，还可以将token生成设置为其他风格。

怎么设置呢？只需要在yml配置文件里设置 sa-token.token-style=风格类型 即可，其有多种取值：

// 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 生成策略

如果你觉着以上风格都不是你喜欢的类型，那么你还可以自定义token生成策略，来定制化token生成风格。

怎么做呢？只需要重写 SaStrategy 策略类的 createToken 算法即可：

参考步骤如下：

1、在SaTokenConfigure配置类中添加代码：

@Configuration
public class SaTokenConfigure {
    /**
     * 重写 Sa-Token 框架内部算法策略 
     */
    @Autowired
    public void rewriteSaStrategy() {
    	// 重写 Token 生成策略 
    	SaStrategy.me.createToken = (loginId, loginType) -> {
    		return SaFoxUtil.getRandomString(60);	// 随机60位长度字符串
    	};
    }
}

2、再次调用 StpUtil.login(10001)方法进行登录，观察其生成的token样式:

gfuPSwZsnUhwgz08GTCH4wOgasWtc3odP4HLwXJ7NDGOximTvT4OlW19zeLH

参考资料

Sa-Token 文档：https://sa-token.cc
Gitee 仓库地址：https://gitee.com/dromara/sa-token
GitHub 仓库地址：https://github.com/dromara/sa-token