javascript - Nuxt asyncdata axios刷新时会丢失身份验证 token

我正在调用获取API，该API获取邮件数据数组。对 postman 来说效果很好。当我使用asyncdata方法获取数组时。如果用户刷新页面“我收到401错误”，它将仅工作一次。我从cookie中提取 token 就好了。通常在非asyncData上，我这样做是为了设置标题

this.$axios.setHeader('Authorization','Bearer ' + this.$store.state.token);
        this.$axios.$post('upload/avatar',formData,{
          headers: {'content-type': 'multipart/form-data'}
        }).then(res =>{

        }).catch(err => console.error(err));{

        }
      }

这工作正常，没有问题

但是我的asnycData是这样的

asyncData(context){
      //Cookie has to be read for async to work for now if user disables cookies breaks this page
       let token = Cookie.get('token');
      context.app.$axios.setHeader('Authorization',`Bearer ${token}`);

      return  context.app.$axios.$get('get/all/mail').then(mailData =>{
        console.log(context.app.$axios.defaults);

        let mailMap = [];
        //create array to load mail data in
        for(let key in mailData){
          mailMap.push({...mailData[key]});
        }

        return{
         mailArray:mailMap
        }
      }).catch(e =>console.error(e));
  }

我正在尝试制作一个可以发送，删除和草稿邮件的简单收件箱页面。

最佳答案

问题可能是由于asyncData是从服务器运行的，因此它将丢失所有浏览器cookie。

如果您使用的是axios，则nuxt社区已设置middleware模块，该模块可用于自动将浏览器cookie注入(inject)服务器请求中。