时间戳

首页 > 解决方案 > 在 axios 操作上保持令牌更新

javascript - 在 axios 操作上保持令牌更新

问题描述

我想使用一个 Express REST 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 实例而无需导入它。

使用 APIlocalStorage.token时返回未定义，因为在创建实例时未设置。

如何Authorization在不每次手动传递令牌的情况下更新此属性？

标签： javascriptvue.jsaxios

解决方案

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

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

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

推荐阅读