React未登录获取token报Cannot read properties of null如何处理

报错出在requestMethod.jsx的TOKEN赋值逻辑：

TypeError: Cannot read properties of null (reading 'user')
模块加载时会直接执行TOKEN的取值代码，未登录状态下localStorage.getItem('persist:root')返回null，连续嵌套的JSON.parse+属性读取没有做非空校验，直接触发报错。而且你当前的写法TOKEN是固定值，登录成功后axios实例的请求头也不会自动更新，后续请求也会携带无效的空token。

1. 修改requestMethod.jsx代码 #

用axios请求拦截器动态读取token，加全链路非空校验，避免初始化时报错，同时保证登录后能拿到最新的token：

import axios from 'axios'

const BASE_URL = 'http://localhost:5000/api'

// 公共请求 不需要携带token
export const publicRequest = axios.create({
  baseURL: BASE_URL,
})

// 需要鉴权的用户请求
export const userRequest = axios.create({
  baseURL: BASE_URL,
})

// 给userRequest加请求拦截器 动态拼接token
userRequest.interceptors.request.use(
  (config) => {
    // 逐层非空校验 避免取值报错
    const persistRoot = localStorage.getItem('persist:root')
    if (persistRoot) {
      try {
        const rootData = JSON.parse(persistRoot)
        if (rootData.user) {
          const userData = JSON.parse(rootData.user)
          const token = userData?.currentUser?.accessToken
          if (token) {
            config.headers.token = `Bearer ${token}`
          }
        }
      } catch (e) {
        // 本地存储数据格式异常 直接清空避免后续反复报错
        localStorage.removeItem('persist:root')
      }
    }
    return config
  },
  (error) => {
    return Promise.reject(error)
  }
)

2. 优化login.jsx的登录跳转逻辑 #

原代码中login是异步接口调用，需要等待登录成功后再跳转到首页，避免未登录状态进入首页触发权限校验：

const handleClick = async (e) =>{
  e.preventDefault()
  // 等待登录接口调用成功、redux状态更新后再跳转
  await login(dispatch,{username,password})
  history.push('/home')
}

*注意：如果你的login是redux异步action，需要确保它返回Promise，否则await逻辑不生效。

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