localstorage 注意更新 JWT Reactjs答案

【问题标题】：localstorage do note update JWT Reactjslocalstorage 注意更新 JWT Reactjs
【发布时间】：2020-01-05 11:30:12
【问题描述】：

这是系统流程：

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

【问题讨论】：

你能简单解释一下问题是什么吗？导致根据代码设置新项目
是的，代码设置了新项目，但新数据在我更新页面之前不会保留。就好像旧数据保留在 localStorage 中，直到页面刷新。问题是导航页面时 react-router-dom 没有更新
请添加您的不调用渲染的 React 组件，我认为 props 设置不正确。
新登录是否意味着注销然后然后登录？
1.你确定res 不为空吗？ 2.你确定res.data.data就是你需要存储的吗？我问是因为它肯定会从存储中删除旧的user_info，但我不确定您是否没有将未定义的值写回来。

标签： javascript reactjs axios local-storage

【解决方案1】：

当您创建一个 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)
)

【讨论】：

我不能使用拦截器，我编辑了问题，但我得到了错误：未捕获（承诺中）TypeError：无法读取未定义的属性'cancelToken'

【解决方案2】：

我可以使用我朋友 JCQuintas 的提示来做到这一点

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

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}`
    }
});

api.interceptors.request.use(function (config) {
    console.log(config);
    if (isAuthenticated()) {
        var user_info = JSON.parse(localStorage.getItem('user_info'));
        var auth_token = user_info.auth_token;
    }
    config.headers.Authorization =  `Bearer ${auth_token}`;

    return config;
});

export default api;

【讨论】：