Question

我正在调用获取API，该API获取邮件数据数组。对邮递员来说效果很好。当我使用asyncdata方法获取数组时。如果用户刷新页面“我收到401错误”，它只能工作一次。我从cookie中提取令牌就好了。通常在非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));
  }

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

Answer 1

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

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

Nuxt asyncdata axios刷新时会丢失身份验证令牌

1 个答案: