在 axios 操作上保持令牌更新答案

【问题标题】：keep token updated on axios action在 axios 操作上保持令牌更新
【发布时间】：2019-08-04 03:12:43
【问题描述】：

我想使用 Express REST API，该 API 需要为某些路由提供有效的 json Web 令牌。由于我每次想创建“Axios 配置文件”时都必须从本地存储中传递令牌。

我的文件 http.js 包含以下代码

import Vue from "vue";
import axios from "axios";

const devInstance = createInstance("http://localhost:3000");

devInstance.interceptors.request.use(config => {
    console.log(config);
    return config;
}, err => {
    console.log(err);
    return Promise.reject(err);
});

devInstance.interceptors.response.use(res => {
    console.log(res);
    return res;
}, err => {
    console.log(err);
    return Promise.reject(err);
});

const productionInstance = createInstance("http://www.myApi.com");

function createInstance(baseURL){
    return axios.create({
        baseURL,
        headers: {
            'Content-Type': 'application/json',
            'Authorization': `Bearer ${localStorage.token}`
        }
    });
}

Vue.prototype.$http = devInstance; // Check debug/build mode

在我的 main.js 中我导入了这个实例一次

import http from "./http.js";

从现在开始，我可以使用this.$http 来获取全局 axios 实例，而无需导入它。

使用 API localStorage.token 时返回 undefined，因为在创建实例时未设置。

如何保持Authorization 属性更新，而无需每次都手动传递令牌？

【问题讨论】：

标签： javascript vue.js axios

【解决方案1】：

我认为您应该编写一个请求拦截器，将Authorization 标头添加到所有请求中。

devInstance.interceptors.request.use((config) => {
    config.headers.Authorization = `Bearer ${localStorage.token}`;
    return config;
}, (error) => Promise.reject(error));

这样您将始终获得当前存储的令牌。

【讨论】：

【解决方案2】：

您应该为该授权字段创建一个计时器和一个异步更新。可以是一个单独的组件来处理这个问题，也可以是该组件上的计时器和异步方法（但不确定您是否可以使用 Vue 来做到这一点）。

希望对您有所帮助。干杯

【讨论】：