SpringBoot+Shiro前後端分離項目通過JWT實作自動登入
雖然 Shiro 本身可以支援擴充 RememberMe 功能，但僅限于傳統項目
因為 Shiro 的使用者資訊是基于 Session 進行管理，在前後端分離的項目中無法實作 Session 狀态的前後統一
是以本文通過 JWT 對 Shiro 原生的 Session 控制進行替換，進而實作使用者資訊的前後傳遞及判斷
更多精彩
涉及資料
導入項目所需的依賴
對于 SpringBoot 和 Shiro 的依賴此處不重複介紹
以下是 JWT 的依賴包，就一個即可
com.auth0
java-jwt
3.2.0
建立 JWTToken 替換 Shiro 原生 Token
Shiro 原生的 Token 中存在使用者名和密碼以及其他資訊 [驗證碼，記住我]
在 JWT 的 Token 中因為已将使用者名和密碼通過加密處理整合到一個加密串中，是以隻需要一個 token 字段即可
public class JWTToken implements AuthenticationToken {
// 密鑰
private String token;
public JWTToken(String token) {
this.token = token;
}
@Override
public Object getPrincipal() {
return token;
}
@Override
public Object getCredentials() {
return token;
}
}
建立 JWTUtil 整合 JWT 相關操作
在這個工具類中可以實作對使用者名和密碼的加密處理，校驗 token 是否正确，擷取使用者名等操作
Algorithm algorithm = Algorithm.HMAC256(password) 是對密碼進行加密後再與使用者名混淆在一起
在簽名時可以通過 .withExpiresAt(date) 指定 token 的過期時間
public class JWTUtil {
// 過期時間30天
private static final long EXPIRE_TIME = 24 * 60 * 30 * 1000;
public static boolean verify(String token, String username, String password) {
try {
Algorithm algorithm = Algorithm.HMAC256(password);
JWTVerifier verifier = JWT.require(algorithm).withClaim("username", username).build();
DecodedJWT jwt = verifier.verify(token);
return true;
} catch (Exception e) {
return false;
}
}
public static String getUsername(String token) {
try {
DecodedJWT jwt = JWT.decode(token);
return jwt.getClaim("username").asString();
} catch (JWTDecodeException e) {
return null;
}
}
public static String sign(String username, String password) {
try {
// 指定過期時間
Date date = new Date(System.currentTimeMillis() + EXPIRE_TIME);
Algorithm algorithm = Algorithm.HMAC256(password);
return JWT.create()
.withClaim("username", username)
.withExpiresAt(date)
.sign(algorithm);
} catch (UnsupportedEncodingException e) {
return null;
}
}
}
建立 JWTFilter 實作前端請求統一攔截及處理
executeLogin() 方法中的 getSubject(request, response).login(token) 就是觸發 Shiro Realm 自身的登入控制，具體内容需要手動實作
executeLogin() 始終傳回 true 的原因是因為具體的是否登入成功的判斷，需要在 Realm 中手動實作，此處不做統一判斷
LOGIN_SIGN 是前端放置在 headers 頭檔案中的登入辨別，如果使用者發起的請求是需要登入才能正常傳回的，那麼頭檔案中就必須存在該辨別并攜帶有效值
public class JWTFilter extends BasicHttpAuthenticationFilter {
// 登入辨別
private static String LOGIN_SIGN = "Authorization";
@Override
protected boolean isLoginAttempt(ServletRequest request, ServletResponse response) {
HttpServletRequest req = (HttpServletRequest) request;
String authorization = req.getHeader(LOGIN_SIGN);
return authorization != null;
}
@Override
protected boolean executeLogin(ServletRequest request, ServletResponse response) throws Exception {
HttpServletRequest req = (HttpServletRequest) request;
String header = req.getHeader(LOGIN_SIGN);
JWTToken token = new JWTToken(header);
getSubject(request, response).login(token);
return true;
}
@Override
protected boolean isAccessAllowed(ServletRequest request, ServletResponse response, Object mappedValue) {
if (isLoginAttempt(request, response)) {
try {
executeLogin(request, response);
} catch (Exception e) {
throw new TSharkException("登入權限不足！", e);
}
}
return true;
}
@Override
protected boolean preHandle(ServletRequest request, ServletResponse response) throws Exception {
HttpServletRequest httpServletRequest = (HttpServletRequest) request;
HttpServletResponse httpServletResponse = (HttpServletResponse) response;
httpServletResponse.setHeader("Access-control-Allow-Origin", httpServletRequest.getHeader("Origin"));
httpServletResponse.setHeader("Access-Control-Allow-Methods", "GET,POST,OPTIONS,PUT,DELETE");
httpServletResponse.setHeader("Access-Control-Allow-Headers", httpServletRequest.getHeader("Access-Control-Request-Headers"));
// 跨域時會首先發送一個option請求，這裡我們給option請求直接傳回正常狀态
if (httpServletRequest.getMethod().equals(RequestMethod.OPTIONS.name())) {
httpServletResponse.setStatus(HttpStatus.OK.value());
return false;
}
return super.preHandle(request, response);
}
}
自定義 ShiroDatabaseRealm 實作 Shiro Realm 的登入控制
重寫 Realm 的 supports() 方法是通過 JWT 進行登入判斷的關鍵
因為前文中建立了 JWTToken 用于替換 Shiro 原生 token
是以必須在此方法中顯式的進行替換，否則在進行判斷時會一直失敗
登入的合法驗證通常包括 token 是否有效 、使用者名是否存在 、密碼是否正确
通過 JWTUtil 對前端傳入的 token 進行處理擷取到使用者名
然後使用使用者名前往資料庫擷取到使用者密碼
再将使用者面傳入 JWTUtil 進行驗證即可
public class ShiroDatabaseRealm extends AuthorizingRealm {
private Logger logger = LoggerFactory.getLogger(this.getClass());
@Autowired
private ShiroAuthService shiroAuthService;
@Override
protected AuthorizationInfo doGetAuthorizationInfo(PrincipalCollection principals) {
logger.info("doGetAuthorizationInfo+" + principals.toString());
String username = JWTUtil.getUsername(principals.toString());
MemberDTO member = shiroAuthService.getPrincipal(username);
SimpleAuthorizationInfo info = new SimpleAuthorizationInfo();
List userPermissions = shiroAuthService.getPermissions(member.getId());
// 基于Permission的權限資訊
info.addStringPermissions(userPermissions);
return info;
}
@Override
public boolean supports(AuthenticationToken token) {
return token instanceof JWTToken;
}
@Override
protected AuthenticationInfo doGetAuthenticationInfo(AuthenticationToken authcToken) throws AuthenticationException {
String token = (String) authcToken.getCredentials();
String username = JWTUtil.getUsername(token);
MemberDTO member = shiroAuthService.getPrincipal(username);
// 使用者不會空
if (member != null) {
// 判斷是否禁用
if (member.getStatus().equals(MemberStatus.disableStatus)) {
throw new DisabledAccountException("901");
}
// 密碼驗證
if (!JWTUtil.verify(token, username, member.getLoginPassword())) {
throw new UnknownAccountException("900");
}
return new SimpleAuthenticationInfo(token, token, "realm");
} else {
throw new UnknownAccountException("900");
}
}
}
在 ShiroConfiguration 中将所有的請求指向 JWT
指定手工實作的 ShiroDatabaseRealm 用于傳入 DefaultWebSecurityManager
在 securityManager 中關閉預設的 Session 控制
因為在前後分離項目中前端是無法擷取到後端 Session 的，即無法實作使用者登入狀态的同步
在 shiroFilterFactoryBean() 中傳入自定義的 TokenFilter
并将所有的請求指向該過濾器 filterRuleMap.put("
public String jwtLogin(String username, String password) {
Assert.notNull(username, "使用者名不能為空");
Assert.notNull(password, "密碼不能為空");
// 擷取使用者密碼混淆值
MemberDTO member = memberService.getMemberSalt(username);
// 加密目前使用者輸入密碼
byte[] bytePassword = DigestUtil.sha1(password.getBytes(), EncodeUtils.hexDecode(member.getSalt()), Constants.PASSWORD_HASH_INTERATIONS);
String encodePassword = EncodeUtils.hexEncode(bytePassword);
if (!encodePassword.equals(member.getLoginPassword())) {
throw new TSharkException("900");
}
return JWTUtil.sign(username, encodePassword);
}
}
在前端的請求發起基類中對頭檔案進行統一傳遞
由于本項目用的 SPA 模式，除了歡迎頁不需要登入，其餘頁面都需要登入後才能通路
是以在基類中對頭檔案進行統一處理，預設所有請求都會傳遞使用者登入狀态
個别不需要傳遞登入狀态的，再進行單獨處理
在頭檔案中指定 Authorization 自定義資訊，對應的 token 值是使用者登入後存入到 vuex 中的數組
import axios from 'axios'
import router from 'router'
import store from 'store'
import qs from 'qs'
import { SET_USER_INFO } from 'store/mutation-types'
import * as config from 'assets/scripts/config/config'
axios.defaults.withCredentials = true
const setUserInfo = function (user) {
store.commit(SET_USER_INFO, user)
}
const getUserInfo = function () {
return store.state.userInfo.token
}
export default function fetch(options) {
return new Promise((resolve, reject) => {
const instance = axios.create({
baseURL: `${config.serverBaseUrl}mop`,
timeout: 10000,
withCredentials: true,
credentials: 'include'
})
// 針對頭檔案是否為空，會做一些權限控制
if (options.headers === undefined) {
// 沒有指定頭檔案的使用預設頭檔案，需要傳入使用者資訊
options.headers = {
'Content-Type': 'application/x-www-form-urlencoded',
'Authorization': getUserInfo()
}
}
// 表單送出格式需要進行參數轉換
if (options.headers['Content-Type'].indexOf('x-www-form') !== -1) {
// 參數格式轉換
options.data = qs.stringify(options.data)
}
instance(options).then((response) => {
let result = response.data
// 無資料
if (!result) {
return false
}
// 未授權
if (result.status === config.UNAUTHORIZED_CODE || result.data === config.UNAUTHORIZED_CODE) {
// 清空使用者資訊
setUserInfo(null)
// 跳轉至登入界面
router.replace({name: 'portal'})
return false
}
resolve(result)
return false
}).catch((error) => {
reject(error)
// 清空使用者資訊
setUserInfo(null)
router.replace({name: 'portal'})
})
})
}
單獨處理不需要頭檔案的請求
由于 fetch.js 中對頭檔案存在 undefined 的判斷，是以外部如果傳入頭檔案，則可以替換預設的頭檔案配置
import fetch from 'assets/scripts/fetch/fetch'
import * as config from 'assets/scripts/config/config'
let baseUrl = '/api/portals'
export function covers() {
const url = `${baseUrl}/covers`
return fetch({
url: url,
method: config.GET,
headers: config.VISITOR_HEADER
})
}
實際開發中通常會存在一個 config.js 檔案，用于存儲一系列通用配置資訊
// 遊客頭檔案
export const VISITOR_HEADER = {
'Content-Type': 'application/x-www-form-urlencoded'
}
使用者登入成功後将後端傳回的 token 值存入 cookie
登入操作實際應該對使用者名和密碼進行有效性判斷，以及登入失敗後的錯誤提示，此處都省略，重點突出将 token 值存入 vuex 的步驟
...
@keyup.enter.native="sendLogin">
@keyup.enter.native="sendLogin">
{{captchaText}}
...
import { SET_USER_INFO } from 'store/mutation-types'
export default {
name: 'portal',
data() {
return {
countDown: 0,
timer: null,
user: {
username: '',
password: ''
}
}
},
methods: {
...mapMutations({
set_user_info: SET_USER_INFO
}),
// 使用者登入
sendLogin() {
...
this.$fetch.login.login({
username: this.user.username,
password: this.user.password
}).then((res) => {
...
this.$toast.success('登入成功')
this.set_user_info({
token: res.data,
isLogin: true
})
...
})
}
...
}
vuex 處理 token 值
在 mutations.js 中，當存入使用者資訊時
一份存入 session ，供日常使用
一份存入 cookie ，有效期 30 天，供自動登入使用，具體的 cookie 存值方式，請參見 簡單封裝浏覽器 cookie 工具類
同時需要確定，當使用者手動退出後執行使用者資訊清除時，需要同時清除 cookie
// 引入mutations-types
import * as types from './mutation-types'
import { sessionStorage, cookieStorage } from 'assets/scripts/storage'
// 定義mutation，其内部是一些修改方法
const mutations = {
// 第一個參數是狀态值
// 第二個參數為送出狀态修改是傳入的對象參數
[types.SET_USER_INFO](state, userInfo) {
state.userInfo = userInfo || {}
if (userInfo === null) {
sessionStorage.remove('userInfo')
cookieStorage.remove('userInfo')
} else {
sessionStorage.set('userInfo', userInfo)
cookieStorage.set('userInfo', userInfo, 30)
}
}
...
}
// 暴露給外部
export default mutations
在請求首頁時判斷是否可以自動登入
在 router.js 的最後添加 router.beforeEach() ，可以在連結跳轉之前執行一些預判操作
如果 cookie 中存在使用者登入資訊，則将資訊取出重新放入 vuex ，并在後續操作中直接跳轉至登入後的首屏頁面
router.beforeEach((to, from, next) => {
// 擷取目前請求的名稱
// let toName = to.name
// 擷取目前請求的路徑
let toPath = to.path
// 請求首頁時判斷使用者是否存在本地登入資訊
if (toPath.indexOf('portal') === 1) {
// 擷取使用者資訊
let userInfo = cookieStorage.get('userInfo')
// 存在使用者資訊
if (userInfo !== undefined && userInfo.token !== undefined) {
// 将使用者資訊重新進行狀态管理
store.commit(SET_USER_INFO, userInfo)
}
}
// 擷取使用者登入辨別
let isLogin = store.state.userInfo.isLogin
// 使用者未登入，且請求的不是首頁或首頁子頁面
if (!isLogin && toPath.indexOf('portal') !== 1) {
// 跳轉到登入頁面
next({
name: 'portal'
})
} else {
// 使用者已登入，且請求的是登入頁面
if (isLogin && toPath.indexOf('portal') === 1) {
// 跳轉到首頁
next({
path: serverBaseUrl
})
} else {
// 預設操作
next()
}
}
})