引言

登录页面

写项目的时候遇到一个问题，用户必须登录以后才能进入用户中心页面。相当于判断用户是否登录，若没有，当用户点击用户中心的时候，跳转到的是另一个页面（登录页面）。在react中并没有提供对应的api，作者github上做出了回答，他认为你可以在渲染函数中执行此操作，JSX 不需要 API，因为它更灵活。那如何实现呢？

环境

"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.6.1",
"@reduxjs/toolkit": "^1.9.1",
"react-redux": "^8.0.5"

实现

1.在用户登录成功后，将后端返回来的`token`、用户信息`useInf`、是否登录`isLogin`(由false改为true)放入redux和localStorage中。

2.实现RequireAuth组件。

RequireAuth主要作用是判断登录状态，如果没有登录则跳转到登录页面。

这里登录状态通过user.isLogin判断

import { useSelector } from "react-redux";
import { Navigate, useLocation } from "react-router-dom";

const RequireAuth = ({ children }) => {

  const user = useSelector(state => state.user)
  const location = useLocation();
  if (!user.isLogin) {
    return <Navigate to="/login" state={{ from: location }} replace />;
  }
  return children;
}

export default RequireAuth;