useAuthStatus钩子认证失效求助：React私有路由逻辑异常

核心问题拆解 #

你的代码存在两个关键问题：

1. 未处理userDetails的初始边界状态：登录前Redux中userDetails可能为undefined或null，直接访问userDetails.status会导致逻辑中断，甚至控制台报错。
2. 私有路由未等待验证完成：PrivateRoutes组件未处理checkingStatus状态，在验证流程还未完成时，就因初始loggedIn: false直接跳转到登录页，后续userDetails更新后也无法触发正确渲染。

修复后的useAuthStatus钩子 #

import { useState, useEffect } from 'react'
import { useSelector } from 'react-redux'

export const useAuthStatus = () => {
  const [loggedIn, setLoggedIn] = useState(false)
  const [checkingStatus, setCheckingStatus] = useState(true)
  
  const { userDetails } = useSelector(state => state.userLogin)
  
  useEffect(() => {
    // 先处理userDetails不存在的情况
    if (!userDetails) {
      setLoggedIn(false)
      setCheckingStatus(false)
      return
    }

    // 根据status字段更新登录状态
    setLoggedIn(userDetails.status === "ok")
    setCheckingStatus(false)
  }, [userDetails])

  return { loggedIn, checkingStatus }
}

修复后的PrivateRoutes组件 #

import React from "react"
import { Outlet, Navigate } from "react-router-dom"
import { useAuthStatus } from '../../hooks/useAuthStatus'

const PrivateRoutes = () => {
  const { loggedIn, checkingStatus } = useAuthStatus()

  // 验证过程中显示加载状态（可替换为你的自定义加载组件）
  if (checkingStatus) {
    return <div>验证中...</div>
  }

  // 验证完成后再决定路由跳转
  return loggedIn ? <Outlet /> : <Navigate to='/login' replace />
}

export default PrivateRoutes

额外排查要点 #

1. Redux状态更新合法性：确保userLogin reducer中更新userDetails时使用不可变更新，否则Redux不会触发组件重新渲染：

   // 正确的reducer更新示例
   const userLoginReducer = (state = { userDetails: null }, action) => {
     switch(action.type) {
       case 'LOGIN_SUCCESS':
         return { ...state, userDetails: action.payload }
       case 'LOGOUT':
         return { ...state, userDetails: null }
       default:
         return state
     }
   }
   

2. 控制台错误检查：打开浏览器控制台，确认是否存在Cannot read property 'status' of undefined这类报错，若有则说明初始userDetails未正确初始化。
3. 日志调试：在useAuthStatus的useEffect中添加console.log(userDetails)，查看每次触发时userDetails的实际值，确认登录成功后是否返回了status: "ok"的对象。

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