页面重定向时localStorage数据丢失问题排查求助

核心问题定位 #

从你提供的代码来看，最直接的问题出在ProtectedRoute.tsx的逻辑里：

let eventUrlIdentifier = "";
if(props.match.path === "/event/:identifier")
    let url = props.match.url;
    let s = url.split("/");
    eventUrlIdentifier = s[2];

这段代码的if语句缺少花括号，导致只有let url = props.match.url;属于if的代码块，后面的拆分URL和赋值语句会被无条件执行。当用户访问的路径不是/event/:identifier时，url变量未定义，执行split会抛出错误，最终eventUrlIdentifier可能是空字符串或者未正确赋值——你存到localStorage的可能本来就是无效值，而非存储后丢失。

另外，重定向时机也可能有影响：如果存储identifier的操作是在<Redirect>渲染之后才执行，React的重定向会立即触发页面跳转，导致存储代码被中断执行。

修复步骤 #

1. 修复变量作用域问题 #

给if语句加上花括号，确保逻辑块正确，更推荐直接从路由参数中取值，不用手动拆分URL：

let eventUrlIdentifier = "";
if(props.match.path === "/event/:identifier") {
    // 直接从路由参数中获取identifier，避免手动拆分出错
    eventUrlIdentifier = props.match.params.identifier;
}

2. 确保存储操作在重定向前完成 #

不要依赖<Redirect>组件的渲染时机触发存储，先完成localStorage存储，再执行重定向：

if (!clientSettings.allowAnonymous) {
    // 先存储identifier
    localStorage.setItem("eventIdentifier", eventUrlIdentifier);
    // 再执行重定向
    return <Redirect to={{ pathname: '/auth', state: { from: props.location } }} />;
}

如果是在useEffect里用window.location.href重定向，也要确保存储操作同步执行在重定向之前：

useEffect(() => {
    if (需要重定向) {
        localStorage.setItem("eventIdentifier", eventUrlIdentifier);
        window.location.href = "/auth";
    }
}, [eventUrlIdentifier]);

3. 更优替代方案：用React Router的state传递参数 #

比起localStorage，更推荐用React Router的state传递临时参数，避免存储的兼容性问题：

// 重定向时传入state
return <Redirect to={{ 
    pathname: '/auth', 
    state: { 
        from: props.location, 
        eventIdentifier: eventUrlIdentifier 
    } 
}} />;

// 在Auth组件中获取参数
const location = useLocation();
const eventIdentifier = location.state?.eventIdentifier;

这种方式不需要依赖localStorage，参数只会在路由跳转的上下文里存在，更适合临时传递认证前的路由参数。

为什么Token能正常存储？ #

认证成功后存储Token的操作是在认证流程完成后执行的，此时页面已经稳定加载，没有立即的重定向中断代码执行，所以存储操作能完整完成。而认证前的存储操作要么因为代码逻辑错误存了空值，要么因为重定向太快导致存储被中断。

内容的提问来源于stack exchange，提问作者C-Cos