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

妖狐艹你老母 2023-10-12 11:11 57阅读 0赞

# 一、架构分析 #

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

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

> Gitee 开源地址：[gitee.com/dromara/sa-…][gitee.com_dromara_sa-]

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

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

xml复制代码
    <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 有两个特性：

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

这就使得我们在前端代码中，无需任何特殊操作，就能完成鉴权的全部流程（因为整个流程都是后端控制完成的）  
而在app、小程序等前后端分离场景中，一般是没有 Cookie 这一功能的，此时大多数人都会一脸懵逼，咋进行鉴权啊？

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

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

# 三、后端将 token 返回到前端 #

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

代码示例：

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

# 四、前端将 token 提交到后端 #

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

**方式1，简单粗暴**

js复制代码// 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，更加灵活**

js复制代码// 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);	
    	}
    });

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

**其它解决方案：**

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

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

# 五、代码对比 #

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

java复制代码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时会在前面加个固定的前缀，例如：

js复制代码{
    	"satoken": "Bearer xxxx-xxxx-xxxx-xxxx"
    }

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

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

yaml复制代码sa-token: 
    	# token前缀
    	token-prefix: Bearer

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

**注意点：**

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

# 七、自定义 Token 风格 #

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

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

java复制代码// 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配置类中添加代码：

java复制代码@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样式:

java复制代码gfuPSwZsnUhwgz08GTCH4wOgasWtc3odP4HLwXJ7NDGOximTvT4OlW19zeLH

--------------------

### 参考资料 ###

*  Sa-Token 文档：[sa-token.cc][]
 *  Gitee 仓库地址：[gitee.com/dromara/sa-…][gitee.com_dromara_sa-]
 *  GitHub 仓库地址：[github.com/dromara/sa-…][github.com_dromara_sa-]

[gitee.com_dromara_sa-]: https://link.juejin.cn/?target=https%3A%2F%2Fgitee.com%2Fdromara%2Fsa-token
[sa-token.cc]: https://link.juejin.cn/?target=https%3A%2F%2Fsa-token.cc
[github.com_dromara_sa-]: https://link.juejin.cn/?target=https%3A%2F%2Fgithub.com%2Fdromara%2Fsa-token