vue項目：前端請求攔截器Token缺失導致授權失敗的解決方案
在vue項目中，前端請求常常需要攜帶Token進行身份驗證。本文分析一個常見的場景：前端請求未攜帶Token導致后端攔截，并提供解決方案。
問題： 用戶登錄后，后端返回Token并存儲在sessionstorage中。但后續請求（例如獲取用戶列表）卻因未攜帶Token而被后端攔截，提示未登錄。
排查： Token存儲代碼已確認無誤，如下：
立即學習“前端免費學習筆記（深入）”；
vue.use(vuex) export default new vuex.store({ state: { token: sessionStorage.getItem("token"), user: JSON.parse(sessionStorage.getItem("user")) }, mutations: { set_token: (state, token) => { state.token = token; sessionStorage.setItem("token", token); }, set_user: (state, user) => { state.user = user; sessionStorage.setItem("user", JSON.stringify(user)); }, remove_info: (state) => { state.token = ''; state.user = {}; sessionStorage.setItem("token", ''); sessionStorage.setItem("user", JSON.stringify('')); } }, });
請求攔截器代碼：
import axios from "axios"; import router from "../router"; import store from "@/store"; const service = axios.create({ baseURL: process.env.base_api, }); service.interceptors.request.use( config => { if (store.getters.getToken) { // 問題可能在此處 config.headers['token'] = window.sessionStorage.getItem("token"); } return config; }, error => { console.log(error); return Promise.reject(error); } ); // ... (response interceptor remains unchanged)
后端攔截器代碼（無誤）：
public class LoginInterceptor implements HandlerInterceptor { @Override public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception { String token = request.getHeader("token"); if (StringUtils.isBlank(token)) { setReturn(response, 401, "用戶未登錄，請先登錄"); return false; } return true; } }
分析： 問題關鍵在于前端請求攔截器中的 if (store.getters.getToken) 這行代碼。store.getters.getToken 的邏輯可能存在問題，導致無法正確獲取Token。
解決方案： 直接從 sessionStorage 獲取Token，避免中間環節的判斷。修改后的請求攔截器代碼：
service.interceptors.request.use( config => { const token = window.sessionStorage.getItem("token"); if (token) { config.headers['token'] = token; } return config; }, error => { console.log(error); return Promise.reject(error); } );
此修改直接從 sessionStorage 獲取Token，并進行判斷。如果仍然存在問題，請檢查 store.getters.getToken 的具體實現以及 sessionStorage 中Token的存儲情況。 確保 sessionStorage.getItem(“token”) 能夠正確返回Token值。 同時，檢查大小寫是否一致（token vs Token）。
? 版權聲明
文章版權歸作者所有，未經允許請勿轉載。
THE END
