一、架構分析
目前絕大多數系統都已經采用 “前后端分離” 架構來設計了，傳統的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 = https://www.cnblogs.com/shengzhang/archive/2023/06/05/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
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/554343.html
標籤：其他
下一篇：返回列表