Vue Axios - 令牌未定义

Question

我有一个 Vue SPA，我使用 Axios 来处理请求，使用 vue-axios 来应用它，使用 vuex 来存储令牌。但是当我发送请求时，标头 Authorization 变为 Bearer undefined 或 Bearer null。

流程是，通过登录，我检索一个令牌，将其保存到会话存储中，分派一个登录操作，我的 vuex 存储将从会话存储中设置一个处于状态的令牌。在我的登录和路由器重定向到“/”之后，我想向 /foo 发送一个 GET 请求以及我的令牌。但是在这里我的令牌是未定义的。根据控制台日志，我知道会话存储在发送请求之前确实有令牌。

我正在遵循 Paweljw 的 this 教程中的结构：

Axios/axios.js

import axios from 'axios'

export default axios.create({
  baseURL: 'http://example.com/api/,
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer ' + sessionStorage.token
  }
})

Axios/index.js

import Vue from 'vue';
import VueAxios from 'vue-axios';
import axios from './axios'

Vue.use(VueAxios, axios);

export default Vue;

组件/login.vue

onLogin(res) {
  if (!res.data.token) {
    return this.onLoginFailed();
  }

  sessionStorage.token = res.data.token;

  this.$store.dispatch("login");
  this.$router.replace(this.$route.query.redirect || "/");

组件/foo.vue

...
this.$http
    .get("foo")
    .then(res => this.doSomething(res))
    .catch(() => this.doSomethingElse());

如前所述，这会发送一个带有 Bearer undefined 的请求。我知道当 axios.create(...) 被导出时 sessionStorage.token 为空 - 应用程序启动时尚未设置它。这可能就是原因，但我不明白我应该如何设置它，以及使用相同教程的其他人如何没有这个问题。

非常感谢任何建议。

Answer 1

我怀疑这个教程可能有一个错误——如果你在axios.create中设置了你的header，那么Authorization这个header将会得到sessionStorage的当前值，此时是undefined。

实际上，您希望在 axios.interceptors.request.use 中设置您的标头 - 以便在执行 AJAX 请求时使用 sessionStorage 的值填充标头。像这样的

Vue.prototype.$axios = axios.create(
  {
    headers:
      {
        'Content-Type': 'application/json'
      },
    baseURL: process.env.API_URL
  }
);

Vue.prototype.$axios.interceptors.request.use(
  config =>
  {
    if (store.getters.isUserLoggedin) config.headers['Authorization'] = 'Bearer ' + store.getters.user.token;
    return config;
  }
);

Vue.prototype.$axios.interceptors.response.use(
  response => response,
  error =>
  {
    if (error && error.response && error.response.status && error.response.status === 403)
    {
      store.dispatch('unsetUser');
      router.push('/login');
      return Promise.resolve(); // Avoid showing any errors
    }
    else
    {
      logger.error({
        message: 'Error in HTTP request',
        response: JSON.stringify(extractError(error)),
        status: _get(error, 'response.status', 'unknown'),
        url: _get(error, 'config.url', 'unknown'),
        userId: store.getters.userInfo.id
      });
      throw error;
    }
  }
);