部署React应用后，刷新页面时如何持久化JSON Web Token？

嘿，我来帮你搞定React应用刷新后JWT持久化的问题！你的现有代码已经搭好了Redux和JWT相关的基础框架，只需要补充持久化存储读取和状态恢复的逻辑就行，具体步骤如下：

页面刷新后Redux store会被重置，所以我们需要把JWT存在浏览器的持久化存储（比如localStorage或sessionStorage）里，在应用初始化时主动读取并恢复用户状态。

1. 完善登录逻辑：把JWT存入持久化存储 #

在你的loginActions.js里，当登录成功获取到token后，除了更新Redux状态，还要把token存入localStorage；同时补充登出逻辑，确保清除存储的token：

// loginActions.js
import jwt from 'jsonwebtoken';
import setAuthorizationToken from '../utils/setAuthorizationToken';
import { setCurrentUser } from './loginActions';

export const loginUser = (credentials) => async dispatch => {
  // 这里是你的登录请求逻辑，假设已获取到后端返回的token
  const response = await api.login(credentials);
  const { token } = response.data;
  
  // 把token存入localStorage
  localStorage.setItem('jwtToken', token);
  // 设置请求头的Authorization字段
  setAuthorizationToken(token);
  // 解析token获取用户信息
  const decodedUser = jwt.decode(token);
  // 更新Redux中的用户状态
  dispatch(setCurrentUser(decodedUser));
};

// 登出时清除存储和状态
export const logoutUser = () => dispatch => {
  localStorage.removeItem('jwtToken');
  setAuthorizationToken(false); // 让工具函数移除请求头
  dispatch(setCurrentUser({}));
};

2. 应用初始化时：读取存储恢复用户状态 #

修改你的index.js，在创建store之后，检查localStorage里的token并恢复用户状态，同时可以加入token过期校验：

import React from 'react'
import ReactDOM from 'react-dom'
import {Provider} from 'react-redux'
import Router from './routes'
import {createStore, applyMiddleware, compose} from 'redux'
import thunk from 'redux-thunk'
import rootReducer from './rootReducer'
import setAuthorizationToken from './utils/setAuthorizationToken'
import {setCurrentUser, logoutUser} from './actions/loginActions'
import jwt from 'jsonwebtoken'

// 补全store创建逻辑，支持Redux DevTools（生产环境可移除）
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(
  rootReducer,
  composeEnhancers(applyMiddleware(thunk))
);

// 初始化时恢复用户状态
const savedToken = localStorage.getItem('jwtToken');
if (savedToken) {
  // 给axios请求头设置Authorization
  setAuthorizationToken(savedToken);
  // 解析token中的用户信息
  const decodedUser = jwt.decode(savedToken);
  // 恢复Redux中的用户状态
  store.dispatch(setCurrentUser(decodedUser));

  // 可选：检查token是否过期，过期则自动登出并跳转登录页
  const currentTimestamp = Date.now() / 1000;
  if (decodedUser.exp < currentTimestamp) {
    store.dispatch(logoutUser());
    window.location.href = '/login';
  }
}

ReactDOM.render(
  <Provider store={store}>
    <Router />
  </Provider>,
  document.getElementById('root')
);

3. 确保工具函数支持清除请求头 #

你的setAuthorizationToken.js需要能处理传入false的情况，移除axios的Authorization请求头：

// utils/setAuthorizationToken.js
import axios from 'axios';

export default function setAuthorizationToken(token) {
  if (token) {
    axios.defaults.headers.common['Authorization'] = `Bearer ${token}`;
  } else {
    delete axios.defaults.headers.common['Authorization'];
  }
}

• 如果你更在意安全性，不想让token长期留在浏览器，可以用sessionStorage替代localStorage，它会在关闭标签页时自动清除。
• 生产环境建议移除window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__，或者通过环境变量判断是否启用。
• 登出时一定要同步清除存储里的token，避免残留敏感信息。

内容的提问来源于stack exchange，提问作者Sean