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

问题描述

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;
    }

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

image.png
image.png

阅读 3.5k
3 个回答

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

后端代码目测没啥问题。

前端的话,

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

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

没找到你调用 SET_TOKENN 的地方

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

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

本文参与了SegmentFault 思否面试闯关挑战赛,欢迎正在阅读的你也加入。
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏