首页 文章

Vue Axios - 令牌未定义

提问于
浏览 次
0

我有一个Vue SPA，我使用Axios来处理请求，使用vue-axios来应用它，使用vuex来存储令牌 . 但是当我发送请求时， Headers 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;

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 发送请求 . 我在应用程序启动时设置了'm aware that when axios.create(...) is being exported the sessionStorage.token is null - it hasn' . 而且's probably why, but I don't了解我是如何解决这个问题的 .

任何意见是极大的赞赏 .

vue.js axios vuex

1 回答

  • 0

    我怀疑本教程可能有错误 - 如果您在 axios.create 中设置 Headers ，那么 Authorization Headers 将获得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;
    }
  }
);
    回复于

相关问题