同时多个axios请求_nuxt asyncData并发请求JWT token 错乱问题

问题描述：

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