javascript - localstorage 请注意更新 JWT Reactjs

Question

这是系统流程:

• 我登录并将用户数据保存在本地存储中。
• 我有一个组件 读取 localStorage 以获取用户数据，例如 JWT。

问题是当我进行新登录时，localStorage 不会使用新数据进行更新，因此我无法使用 localStorage 新用户数据进行申请。
我发现如果我手动更新页面，localStorage 就会更新。
在reactjs中，我使用react-router-dom来导航页面。

如何获取新的登录数据来更新 localStorage？

//login
api.post('users/login', {email, password})//make log in
.then(res => {
        localStorage.removeItem('user_info');// I remove the ond data from localStorage
        if(res){//If api do the post
            let data = JSON.stringify(res.data.data)
            localStorage.setItem('user_info', data);//Save new data in localStorage
            history.push('/');//Go the homepage
        }
    }).catch(error => {
        this.setState({ noAuth: true })
        console.log('error');
    });

获取localStorage中用户数据的组件:

import axios from "axios";
import { isAuthenticated } from '../../components/Util/Auth';
export const token = 'Z31XC52XC4';

// var user_info = JSON.parse(localStorage.getItem('user_info'));
// var auth_token = user_info.auth_token;
// console.log(isAuthenticated);
if (isAuthenticated()) {
    var user_info = JSON.parse(localStorage.getItem('user_info'));
    var auth_token = user_info.auth_token;
}


const api = axios.create({
    // baseURL: 'https://url-from/api/', //PRODUÇÃO
    baseURL: 'https://url-from/api/', //DESENVOLVIMENTO
    headers: {
        'Accept': 'application/json, text/plain, */*',
        'Access-Origin': 'D',
        'Authorization': `Bearer ${auth_token}`,
        'Company-Token': `${token}`
    }
});
// console.log(user_info);

api.interceptors.request.use(
    config => {
        console.log(config.headers);
        console.log(user_info);
        const newConf = {
            ...config,
            headers: {
                ...config.headers,
                'Authorization': `Bearer ${auth_token}`,
            }
        }
        // return newConf;
    },
    error => Promise.reject(error)
)

export default api;

Answer 1

当您创建 Axios 实例时，您将传入一个“静态”值。

        'Authorization': `Bearer ${auth_token}`,

如果该值不存在，则变为

        'Authorization': `Bearer undefined`,

要修复此问题，您需要向 axios 添加一个拦截器，以在每个请求时更新该 token 的值，而不仅仅是在创建实例时更新该 token 的值。

api.interceptors.request.use(
  config => {
    const user_info = JSON.parse(localStorage.getItem('user_info'));
    const newConf = { 
      ...config, 
      headers: {
        ...config.headers, 
        'Authorization': `Bearer ${user_info.auth_token}`,
     } 
    }
  },
  error => Promise.reject(error)
)