javascript - localstorage 注意更新 JWT Reactjs

问题描述

这是系统流程：

我登录将用户数据保存在本地存储中。
我有一个组件可以读取 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;

标签： javascriptreactjsaxioslocal-storage

当你创建一个 Axios 实例时，你传递的是一个“静态”值。

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

如果该值不存在，则变为

        'Authorization': `Bearer undefined`,

要修复它，您需要添加一个拦截器以axios在每个请求上更新该令牌的值，而不仅仅是在创建实例时。

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)
)

javascript - localstorage 注意更新 JWT Reactjs

问题描述

解决方案

推荐阅读