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;
}
你期待的结果是什么?实际看到的错误信息又是什么?
回复
1个回答
test
2024-07-06
这个明显是请求头没有携带token。
后端代码目测没啥问题。
前端的话,
// 这个地方有必要判断吗?直接看一下sessionStorage有没有是不是就可以了
if (store.getters.getToken) {
config.headers['token']=window.sessionStorage.getItem("token")
}
本文参与了SegmentFault 思否面试闯关挑战赛,欢迎正在阅读的你也加入。
回复
适合作为回答的
- 经过验证的有效解决办法
- 自己的经验指引,对解决问题有帮助
- 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
- 询问内容细节或回复楼层
- 与题目无关的内容
- “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容