Question

我想使用Express REST API，该API的某些路由需要有效的json网络令牌。由于这个事实，每次我要创建“ 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属性？

Answer 1

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

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

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

Answer 2

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

希望有帮助。干杯

使令牌在axios操作上更新

2 个答案: