vue项目前端发送的请求没有携带token?

作者站长头像
站长
· 阅读数 4

问题描述

login登录后,得到后端返回的token并存储在sessionStorage。当我请求“获取所有用户列表时(网站的一个功能)”,却被拦截了,提示我用户未登录,初步判断是请求时没有携带token

问题出现的环境背景及自己尝试过哪些方法

我查看了存储token的代码

相关代码

存储token的代码(store/index.js )
Vue.use(Vuex)

export default new Vuex.Store({
    state: {
        token: sessionStorage.getItem("token"),
        user: JSON.parse(sessionStorage.getItem("user"))//使用sessionStorage ,关掉浏览器的时候会被清除掉,和 localStorage 相比,比较利于保证实时性。
    },
    mutations: {
        // set
        SET_TOKENN: (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(''))
        }
    },
请求时携带token(utils/require.js)
//让请求头携带token
import axios from "axios";
import router from "../router";
import store from "@/store";

const service=axios.create({
    baseURL:process.env.BASE_API,//api的base_url
})

//request 请求拦截
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)
    }
)

//reponse响应拦截
axios.interceptors.response.use(response => {
// Do something before response is sent
let res=response.data;
console.log(res)

if(res.code===200){
    return response
}else{
    return Promise.reject(response.data.msg)
}
},
// Do something with response error
error=>{
    console.log(error)
    if (error.response.data) {
        error.message=error.response.data.msg
    }
    if (error.response.status==401) {
        router.push("/login")
    }
    return Promise.reject(error)
}
);
export default service
在这被拦截了(LoginInterceptor.java)
public class LoginInterceptor implements HandlerInterceptor {
    @Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
        //从header中获取token
//        Cookie[] cookies = request.getCookies();
//        String token=cookies[0].getValue();
        String token=request.getHeader("token");
        //如果token为空
        if (StringUtils.isBlank(token)){
            setReturn(response,401,"用户未登录,请先登录");
            return false;
        }
        return true;
    }

你期待的结果是什么?实际看到的错误信息又是什么?

vue项目前端发送的请求没有携带token?vue项目前端发送的请求没有携带token?

回复
1个回答
avatar
test
2024-07-06

这个明显是请求头没有携带token。

后端代码目测没啥问题。

前端的话,

// 这个地方有必要判断吗?直接看一下sessionStorage有没有是不是就可以了
if (store.getters.getToken) {
    config.headers['token']=window.sessionStorage.getItem("token")
}

本文参与了SegmentFault 思否面试闯关挑战赛,欢迎正在阅读的你也加入。
回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容