Vue Axios-令牌未定义

Question

我有一个Vue SPA，我使用Axios处理请求，Vue Axios应用它，vuex存储令牌。但当我发送一个请求时，头授权将变成Bearer未定义或Bearer null。

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

我下面的结构从这个教程由Paweljw：

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/索引。js

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

Vue.use(VueAxios, axios);

export default Vue;

组件/登录。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());

如前所述，它发送一个未定义承载的请求。我知道当axios。创建（…）正在导出会话存储。令牌为空-应用程序启动时尚未设置。这可能就是原因，但我不明白我应该如何设置它，以及其他使用相同教程的人如何没有这个问题。

非常感谢您的建议。

Answer 1

我怀疑本教程可能有错误-如果您在axios中设置标题。创建然后授权标题将获取会话存储的当前值，此时该值为未定义。

实际上，您需要在axios中设置标题。拦截器。要求使用-以便在执行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;
    }
  }
);