Question

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

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

我正在遵循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;

Components / 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 || "/");

Components / foo.vue

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

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

任何建议都将不胜感激。

Answer 1

我怀疑本教程可能有误-如果您在axios.create中设置标头，那么Authorization标头将获取sessionStorage的当前值，当前值为{{1} }。

实际上，您希望在undefined中设置标头-这样，在执行AJAX请求时，标头将使用sessionStorage的值填充。像这样

axios.interceptors.request.use

Vue Axios-令牌未定义

1 个答案: