问题描述:
JWT token认证的前后的分离项目,用户a和用户b同时请求一个页面,但是a会得到b的数据,b会得到a的数据;
这个页面的asyncData方法如下;页面有两个并发请求(后面测试,发现就算只有"/api/1"一个请求,只要用了$axios在服务端请求,就会出现token错乱的问题)
async asyncData({ $axios, params, redirect, error }) {
try {
let [res1,res2]=await Promise.all([
$axios.get(`/api/1`),
$axios.get(`/api/2`)
]);
return {
res1,
res2
};
} catch (error) {
console.log(error);
}
},
plugins/axios.js如下:token取自 store.state.token或者req.headers.cookie都会出现描述问题
import cookieparser from 'cookieparser';
export default function ({
$axios,
isDev,
redirect,
store,
req
}) {
$axios.setHeader('Content-Type', 'application/json;charset=UTF-8');
const parsed = cookieparser.parse(req.headers.cookie);
var token = parsed.token;
console.log("进入$axios设置")
$axios.setHeader('Authorization', `JWT ${token}`);
$axios.onError(error => {
const code = error.response && error.response.status;
if (code === 401) {
redirect('/user/login')
}
})
}
console.log("进入$axios设置");这个日志是会在服务端打印出来的,
所以$axios.setHeader('Authorization',`JWT ${token}`);是在服务端执行的。
原因:
暂时未知,如果哪位大哥大姐知道,麻烦下方评论说明一下。
解决办法:
不使用注入vue对象里的$axios,改用axios。然后全局的拦截器设置可以写在 actions里的nuxtServerInit方法下,记得import axios from 'axios';
async nuxtServerInit({
commit,
dispatch
}, {
req,
}) {
let token = null;
if (req.headers.cookie) {
const parsed = cookieparser.parse(req.headers.cookie);
token = parsed.mtoken;
}
dispatch("axiosSet");
if (token) {
axios.defaults.headers.Authorization = 'JWT ' + token;
}
},
// axios设置
async axiosSet({
dispatch,
commit
}) {
axios.interceptors.response.use(
response => {
return response;
},
error => {
if (error.response) {
const code = error.response.status;
if (code === 401) {
console.log(401)
dispatch("logout");
}
console.log(error.response);
return Promise.reject(error.response.data) // 返回接口返回的错误信息
}
});
},
请求页面的 asyncData
async asyncData({ $axios, params, redirect, error }) {
try {
let [res1,res2]=await Promise.all([
axios.get(`/api/1`),
axios.get(`/api/2`)
]);
return {
res1,
res2
};
} catch (error) {
console.log(error);
}
},