当访问令牌过期并且我们需要再次登录以继续作为普通用户时，我们如何保持用户登录

Question

我在代理中使用Nuxt-axios模块。

对于错误处理，我在

插件/axios.js

export default function({ $axios, __isRetryRequest, store, app, redirect , payload , next}) {
  $axios.onRequest(config => {
  if (app.$cookies.get('at') && app.$cookies.get('rt') && config.url != '/post_login/') {
      config.headers.common['Authorization'] = `Bearer ${app.$cookies.get('at')}`;
    }
  });

  $axios.onResponseError(err => {
    const code = parseInt(err.response && err.response.status)

    let originalRequest = err.config;

    if (code === 401) {
      originalRequest.__isRetryRequest = true;

      store
        .dispatch('LOGIN', { grant_type: 'refresh_token', refresh_token: app.$cookies.get('rt')})
        .then(res => {
          originalRequest.headers['Authorization'] = 'Bearer ' + app.$cookies.get('at');
          return app.$axios(originalRequest);
        })
        .catch(error => {
          console.log(error);
        });
    }

    // code for 422 error
    if (code == 422) {
      throw err.response;
    }

  });
}

在我的页面文件夹索引页面上

页面/index.vue

<template>
  <section>Component data</section>
</template>

<script type="text/javascript">
export default {
  async asyncData({ route, store }) {
    await store.dispatch('GET_BANNERS');
  }
}
</script>

所有 API 调用都在 stroes/actions.js 文件中。

现在的问题是，当我刷新页面 index.vue 时，第一个 API 请求将命中并获得响应（如果成功）。但是现在如果在来自 asyncData 的第一个请求（'GET_BANNERS'）并且它得到 401 未经授权的错误，那么我得到以下错误

Error: Request failed with status code 401

错误 [ERR_HTTP_HEADERS_SENT]：发送到客户端后无法设置标头

我该如何解决这个问题？

还有几个问题：

1) 当我在 axios 中编写常见错误代码时，收到 401 的原始请求如何设置要再次存储的数据（我们通常从操作文件中执行此操作）？

2）任何人都可以帮助最佳实践附加授权标头和400,401,422等的错误句柄。

Answer 1

$axios.onResponseError(err => {
  const code = parseInt(err.response && err.response.status);

  let originalRequest = err.config;
  if (code == 401) {
    originalRequest.__isRetryRequest = true;

    let token = app.$cookies.get('rt');

    return new Promise((resolve, reject) => {
      let req = $axios
        .post(`/login`, { grant_type: 'refresh_token', refresh_token: token })
        .then(response => {

          if (response.status == 200) {

              app.$cookies.set('access', response.data.access_token);
              app.$cookies.set('refresh', response.data.refresh_token);
              originalRequest.headers['Authorization'] = `Bearer ${
                response.data.access_token
              }`;
          }
          resolve(response);
        }).catch(e => {
          reject("some message");
        })

      })
      .then(res => {
        return $axios(originalRequest);
      }).catch(e => {
        app.router.push('/login');
      });
  }
});

@canet-robern 希望这能解决你的问题！！