React Hooks如何判断登录成功后访问受保护路由中的组件

解决方案 #

权限检测逻辑无需修改 #

你当前编写的ProtectedRoute组件已经实现了loginEmail存在性检测：访问/dashboard、/createLink路径时会自动读取localStorage判断登录状态，有loginEmail就渲染对应组件，无权限会自动重定向到登录页，这部分逻辑可正常运行。

登录成功后补充路由跳转逻辑即可访问受保护组件 #

当前登录成功的回调中仅存储了邮箱，没有触发页面跳转，修改login.js补全跳转逻辑即可：

// login.js 顶部新增导入
import { useHistory } from 'react-router-dom';

const Login = () => {
  // 新增路由实例调用
  const history = useHistory();
  const [userEmail, setUserEmail] = useState("");

  const onSuccess = (res) =>{
    console.log("Login successfully",res.profileObj);
    const email = res.profileObj.email;
    setUserEmail(email);
    window.localStorage.setItem("loginEmail", email);
    refreshToken(res);
    // 新增跳转逻辑，登录成功后进入控制面板
    history.push('/dashboard');
  }

  // 剩余原有代码保持不变
}

导航组件可按需新增 #

不需要导航组件也能实现基础功能：用户登录后会直接跳转到对应页面，手动输入受保护路径也能通过权限校验正常访问。
如果需要在多个受保护页面之间快速切换，可以直接在App.js的空导航栏位置补充导航链接，登录后才展示：

// App.js 导航栏部分修改
<div className="navbar-nav">
  {localStorage.getItem('loginEmail') && (
    <>
      <Link to="/dashboard">控制面板</Link> &nbsp;
      <Link to="/createLink">新建链接</Link> &nbsp;
      <button onClick={() => {
        localStorage.removeItem('loginEmail');
        window.location.href = '/';
      }}>退出登录</button>
    </>
  )}
</div>

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