Vue项目Token丢失？前端请求拦截器Token获取及授权失败解决方案

Vue项目中，前端请求拦截器因无法获取Token导致授权失败，本文提供解决方案。问题源于请求拦截器中使用`store.getters.getToken`获取Token的逻辑错误，导致无法将Token添加到请求头中，从而被后端拦截。解决方案是直接从`sessionStorage`获取Token，绕过`store.getters.getToken`的潜在问题，确保请求头中包含正确的Token，从而解决授权失败问题。本文详细分析了问题原因，并提供了修改后的请求拦截器代码，有效避免此类错误。

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）。

好了，本文到此结束，带大家了解了《Vue项目Token丢失？前端请求拦截器Token获取及授权失败解决方案》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！