React配合NodeJS JWT认证，如何实现页面刷新后保持用户登录状态？

问题原因 #

React的Redux状态是保存在运行内存中的，页面刷新时整个应用重新加载，所有内存中存储的状态都会被重置，所以才会出现刷新后用户信息丢失、登录状态失效的情况。

推荐方案：应用初始化时主动拉取用户信息 #

你的JWT已经存在Cookie中，且Axios配置了withCredentials: true，每次请求会自动携带Cookie，所以只需要在应用根组件挂载的时候，调用后端的「获取当前登录用户信息」接口，拿到用户信息后重新更新Redux的登录状态即可。

步骤1：后端新增获取当前用户信息接口 #

NodeJS后端新增一个接口，比如GET /api/v1/users/me，鉴权中间件会自动解析Cookie里的JWT，校验通过就返回当前用户的信息，校验失败返回401。

步骤2：新增拉取用户信息的Action #

// 你的action文件里新增
export const getCurrentUser = () => async (dispatch) => {
  try {
    dispatch({ type: USER_LOGIN_REQUEST })
    const { data } = await API.get('/api/v1/users/me')
    dispatch({
      type: USER_LOGIN_SUCCESS,
      payload: data
    })
  } catch (error) {
    dispatch({
      type: USER_LOGIN_FAIL,
      payload: error.response?.data?.message || error.message
    })
  }
}

步骤3：在应用根组件触发初始化调用 #

找到你应用的根组件（一般是App.js或者index.js里包裹路由的上层组件），在挂载的时候执行这个Action：

// App.js示例
import { useEffect } from 'react'
import { useDispatch } from 'react-redux'
import { getCurrentUser } from './actions/userActions'

function App() {
  const dispatch = useDispatch()

  useEffect(() => {
    // 页面刷新/应用初始化时，自动拉取当前登录用户信息
    dispatch(getCurrentUser())
  }, [dispatch])

  // 剩下的你的路由、其他组件代码...
  return (
    {/* 你的应用内容 */}
  )
}

备选方案：用redux-persist持久化Redux状态 #

如果你不想额外新增接口，也可以用redux-persist把用户登录状态持久化存储到localStorage里，刷新时自动恢复状态。

步骤1：安装依赖 #

npm install redux-persist

步骤2：配置Redux持久化 #

修改你的store配置文件：

import { createStore, combineReducers, applyMiddleware } from 'redux'
import thunk from 'redux-thunk'
import { persistStore, persistReducer } from 'redux-persist'
import storage from 'redux-persist/lib/storage' // 默认用localStorage
import { userLoginReducer } from './reducers/userReducers'

const rootReducer = combineReducers({
  userLogin: userLoginReducer,
  // 你的其他reducer...
})

// 持久化配置，只持久化userLogin模块
const persistConfig = {
  key: 'root',
  storage,
  whitelist: ['userLogin'] // 只把登录状态存入localStorage
}

const persistedReducer = persistReducer(persistConfig, rootReducer)

const middleware = [thunk]
export const store = createStore(persistedReducer, applyMiddleware(...middleware))
export const persistor = persistStore(store)

步骤3：修改入口文件的根组件包裹 #

修改index.js，用PersistGate包裹你的应用：

import { Provider } from 'react-redux'
import { PersistGate } from 'redux-persist/integration/react'
import { store, persistor } from './store'
import App from './App'

ReactDOM.render(
  <Provider store={store}>
    <PersistGate loading={null} persistor={persistor}>
      <App />
    </PersistGate>
  </Provider>,
  document.getElementById('root')
)

注意：这个方案会把用户信息存在localStorage里，存在XSS攻击泄露的风险，如果你的用户信息包含敏感数据，优先选择第一种方案。

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