React中Dashboard组件未按认证状态跳转至登录页问题求助

核心问题分析 #

你的代码存在两个关键问题导致认证校验失效：

• LoginForm组件错误覆盖认证状态
  组件顶层的localStorage.setItem("authenticated",false);会在每次LoginForm渲染时强制将认证状态设为false，而且localStorage仅支持存储字符串，这里存入的false会被自动转为字符串"false"，后续读取时会出现类型判断错误。

• Dashboard组件状态初始化逻辑错误
  useState(localStorage.getItem("authenticated") || false)中，localStorage取出的是字符串值，即使是"false"也属于非空字符串，会被判定为true，导致!authenticated条件不成立，无法触发跳转。

修复后的代码 #

1. LoginForm组件修复 #

移除顶层的localStorage.setItem，仅在登录成功时设置认证状态为字符串"true"，并在组件初始化时处理默认状态：

import React, { useState, useEffect } from "react";
import { useNavigate } from "react-router-dom";
import './login.css';

const LoginForm = () => {
    document.body.style = 'background:#20c997';
    const [email, setEmail] = useState("");
    const [password, setPassword] = useState("");
    const navigate = useNavigate();
    const permEmail = "piyush@gmail.com";
    const permPass = "pass";

    // 初始化localStorage，避免未登录时无该键值
    useEffect(() => {
        if (!localStorage.getItem("authenticated")) {
            localStorage.setItem("authenticated", "false");
        }
    }, []);

    const handleEmail = (e) => {
        setEmail(e.target.value);
    }
    const handlePassword = (e) => {
        setPassword(e.target.value);
    }

    const handleSubmit = (e)=>{
        e.preventDefault();
        if(email===permEmail && password===permPass){
            localStorage.setItem("authenticated", "true"); // 存储字符串值
            navigate("/dashboard");
        }else{
            window.alert("Wrong credentials");
        }
    }

    return (
        <>
            <div className="p-5">
                <div className="container text-start w-25 bg-light text-dark h-50 p-5 border border-primary border-2 rounded">
                    <form onSubmit={handleSubmit}> {/* 直接绑定onSubmit到form更规范 */}
                        <div className="mb-3">
                            <label htmlFor="exampleFormControlInput1" className="form-label">Email address</label>
                            <input
                                type="email"
                                className="form-control border border-primary border-1"
                                id="exampleFormControlInput1"
                                placeholder="name@example.com"
                                onChange={handleEmail}
                            />
                        </div>
                        <div className="mb-3">
                            <label htmlFor="exampleFormControlInput2" className="form-label">Password</label>
                            <input
                                type="password"
                                className="form-control border border-primary border-1"
                                id="exampleFormControlInput2"
                                placeholder="password"
                                onChange={handlePassword}
                            />
                        </div>
                        <button 
                            type="submit" 
                            className="btn btn-outline-primary border-1 mt-2"
                        >Submit</button>
                    </form>
                </div>
            </div>
        </>
    )
}

export default LoginForm;

2. Dashboard组件修复 #

正确解析localStorage的字符串值为布尔类型，移除无用的导入，并添加监听同步认证状态：

import React, { useState, useEffect } from "react";
import { Navigate } from "react-router-dom";

const Dashboard = () => {
    document.body.style = 'background:white';
    // 将字符串转换为布尔值初始化状态
    const [authenticated, setAuthenticated] = useState(() => {
        return localStorage.getItem("authenticated") === "true";
    });

    // 监听localStorage变化，处理其他页面修改认证状态的情况
    useEffect(() => {
        const handleStorageChange = () => {
            setAuthenticated(localStorage.getItem("authenticated") === "true");
        };
        window.addEventListener("storage", handleStorageChange);
        return () => window.removeEventListener("storage", handleStorageChange);
    }, []);

    if (!authenticated) {
        return <Navigate replace to="/login" />;
    }

    return(
        <>
            <h1>Hello world</h1>
        </>
    );
}

export default Dashboard;

额外优化建议 #

• 避免直接在组件顶层操作document.body.style，建议用CSS类名控制样式，更符合React组件化规范。
• 可以封装一个全局的认证状态钩子（如useAuth），统一处理localStorage的读写和状态同步，减少重复代码。
• 生产环境中建议使用更安全的方式存储认证信息（如HttpOnly Cookie），localStorage存在XSS攻击风险。

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