React路由鉴权：Protected组件无法获取当前用户问题排查

你的判断方向是对的，核心问题是组件初始渲染时currentUser为undefined，直接触发了Navigate跳转，后续useEffect更新状态的操作已经无法阻止这次跳转。同时还要排查localStorage是否正确存储了用户数据。

具体问题点： #

1. Protected组件初始currentUser设为undefined，第一次渲染直接进入跳转分支，触发页面跳转。即便useEffect后续获取到用户数据，页面已经跳走，无法回到受保护路由。
2. 若登录/注册后localStorage未正确写入用户数据，getCurrentUser()会返回null，也会导致currentUser始终为undefined。

修复方案： #

方案1：初始化时直接读取localStorage

把useState的初始值改为直接调用authService.getCurrentUser()，组件挂载时就能拿到用户数据，无需等待useEffect：

import React, { useState, useEffect } from 'react'
import { Outlet, Navigate } from 'react-router-dom'
import authService from '../services/auth.service';

function Protected() {
  // 初始时直接从localStorage读取用户
  const [currentUser, setCurrentUser] = useState(authService.getCurrentUser());

  // 监听localStorage变化，处理跨页面登出/登录状态同步
  useEffect(() => {
    const handleStorageChange = () => {
      setCurrentUser(authService.getCurrentUser());
    };
    window.addEventListener('storage', handleStorageChange);
    return () => window.removeEventListener('storage', handleStorageChange);
  }, []);
  
  return currentUser ? <Outlet/> : <Navigate to='/notloggedin' replace />;
}

export default Protected

方案2：添加加载状态避免过早跳转

如果需要验证token有效性（比如调用后端接口），可以添加加载状态，在验证完成前不执行跳转：

import React, { useEffect, useState } from 'react'
import { Outlet, Navigate } from 'react-router-dom'
import authService from '../services/auth.service';

function Protected() {
  const [currentUser, setCurrentUser] = useState(undefined);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const checkUser = async () => {
      const user = authService.getCurrentUser();
      // 可选：调用后端接口验证token有效性
      // const isValid = await authService.validateToken(user?.accessToken);
      // if (user && isValid) setCurrentUser(user);
      if (user) setCurrentUser(user);
      setLoading(false);
    };
    checkUser();
  }, []);

  // 加载中显示占位内容（比如加载动画）
  if (loading) return <div>加载中...</div>;
  
  return currentUser ? <Outlet/> : <Navigate to='/notloggedin' replace />;
}

export default Protected

额外排查点：

检查登录/注册逻辑是否正确写入localStorage：

• 登录成功后，确认response.data.accessToken存在，且localStorage.setItem("user", JSON.stringify(response.data))执行成功。
• 打开浏览器开发者工具的Application标签，查看localStorage中是否有user项，格式是否为合法JSON。

内容的提问来源于stack exchange，提问作者M. R