springboot+vue3無感知刷新token實戰

一、java后端

1、token構造實現類

①驗證碼方式實現類

②刷新token方式實現類

?2、token相關操作：setCookie

①createToken

②refreshToken

二、前端（vue3+axios）

????????web網站中，前后端交互時，通常使用token機制來做認證，token一般會設置有效期，當token過了有效期后，用戶需要重新登錄授權獲取新的token，但是某些業務場景下，用戶不希望頻繁的進行登錄授權，但是安全考慮，token的有效期不能設置太長時間，所以有了刷新token的設計，無感知刷新token的機制更進一步優化了用戶體驗，本文是博主實際業務項目中基于springboot和vue3無感知刷新token的代碼實戰。

首先介紹無感知刷新token的實現思路：

①首次授權頒發token時，我們通過后端給前端請求response中寫入兩種cookie

? ? ? ? - access_token

? ? ? ? - refresh_token（超時時間比access_token長一些）

需要注意：

????????-后端setCookie時httpOnly=true（限制cookie只能被http請求攜帶使用，不能被js操作）

? ? ? ? -前端axios請求參數withCredentials=true（http請求時，自動攜帶token）

②access_token失效時，拋出特殊異常，前后端約定http響應碼（401），此時觸發刷新token邏輯

③前段http請求鉤子中，如果出現http響應碼為401時，立即觸發刷新token邏輯，同時緩存后續請求，刷新token結束后，依次續發緩存中的請求

一、java后端

后端java框架使用springboot，spring-security

登錄接口：?

/*** @author lichenhao* @date 2023/2/8 17:41*/
@RestController
public class AuthController {/*** 登錄方法** @param loginBody 登錄信息* @return 結果*/@PostMapping("/oauth")public AjaxResult login(@RequestBody LoginBody loginBody) {ITokenGranter granter = TokenGranterBuilder.getGranter(loginBody.getGrantType());return granter.grant(loginBody);}
}import lombok.Data;/*** 用戶登錄對象** @author lichenhao*/
@Data
public class LoginBody {/*** 用戶名*/private String username;/*** 用戶密碼*/private String password;/*** 驗證碼*/private String code;/*** 唯一標識*/private String uuid;/** grantType 授權類型* */private String grantType;/** 是否直接強退該賬號登陸的其他客戶端* */private Boolean forceLogoutFlag;
}

token構造接口類和token實現類構造器如下：

/*** @author lichenhao* @date 2023/2/8 17:29* <p>* 獲取token*/
public interface ITokenGranter {AjaxResult grant(LoginBody loginBody);
}/*** @author lichenhao* @date 2023/2/8 17:29*/
@AllArgsConstructor
public class TokenGranterBuilder {/*** TokenGranter緩存池*/private static final Map<String, ITokenGranter> GRANTER_POOL = new ConcurrentHashMap<>();static {GRANTER_POOL.put(CaptchaTokenGranter.GRANT_TYPE, SpringUtils.getBean(CaptchaTokenGranter.class));GRANTER_POOL.put(RefreshTokenGranter.GRANT_TYPE, SpringUtils.getBean(RefreshTokenGranter.class));}/*** 獲取TokenGranter** @param grantType 授權類型* @return ITokenGranter*/public static ITokenGranter getGranter(String grantType) {ITokenGranter tokenGranter = GRANTER_POOL.get(StringUtils.toStr(grantType, PasswordTokenGranter.GRANT_TYPE));if (tokenGranter == null) {throw new ServiceException("no grantType was found");} else {return tokenGranter;}}}

這里通過LoginBody的grantType屬性，指定實際的token構造實現類；同時，需要有token

本文我們用到了驗證碼方式和刷新token方式，如下