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

  • Z时代
  • 2024-02-07
  • 分类：IT

问题描述

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？

回答：

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

后端代码目测没啥问题。

前端的话，

// 这个地方有必要判断吗？直接看一下sessionStorage有没有是不是就可以了
if (store.getters.getToken) {
    config.headers['token']=window.sessionStorage.getItem("token")
}
本文参与了SegmentFault 思否面试闯关挑战赛，欢迎正在阅读的你也加入。

回答：

axios 设置headers.Authorization都成功了，但是请求头还是没有，这是为什么？

可能需要后端代码设置下，可以参考这个问题

回答：

没找到你调用 SET_TOKENN 的地方

我和楼上意见不一样，他说的那个是跨域的情况下，options 没过。

你这个看上去不是跨域，就是单纯的 token 没带上，你可以在代码中 console 一下 token 看看是否真的存储了

本文参与了SegmentFault 思否面试闯关挑战赛，欢迎正在阅读的你也加入。

以上是 vue项目前端发送的请求没有携带token？ 的全部内容， 来源链接： utcz.com/p/933942.html

回到顶部