如何在React中重定向到登录页面

Question

我在 React 中设置私有路由中间件时遇到问题。访问私有路由时，我调用“RequireAuth”组件来验证身份验证令牌是否有效。出现这种困境是因为验证是异步的并且会改变上下文的状态。结果，我有两个渲染：第一个返回“null”，第二个返回实际值。

我考虑了替代方案，例如使用另一种状态来指示异步方法正在加载，从而避免在第一次渲染时中间件中的值仍然为空的验证。它有效，但我认为这并不理想！当“用户”状态发生变化时更新上下文很重要，但我不确定这种类型的验证是否真的需要两个渲染，我只需要知道令牌是否有效。

使用实际值而不是“null”初始化“用户”状态是一种选择，但如果没有 useEffect，这将导致每次上下文状态更新时产生多个 API 请求。

第一个上下文返回，异步方法之后的第二个：

目前情况如何：

const RoutesApp = () => {
return (
  <BrowserRouter>
    <Routes>
      <Route path="/home" element={<RequireAuth><Home /></RequireAuth>} />
      <Route path="/login" element={<Login />} />
      <Route path="*" element={<Navigate to="/home" />} />
    </Routes>
  </BrowserRouter>
);
};

export default RoutesApp;

--------------------------------------------------
export const RequireAuth = ({ children }: { children: JSX.Element }) => {
const auth = useAuth(); // Hook by Auth Context

if (!auth.user) {
  return <Navigate to="/login" />
}
return children;

};

--------------------------------------------------
export const AuthProvider = ({ children }) => {

const [user, setUser] = useState(null);
const api = useApi();

useEffect(() => {
  validToken()
}, []);

...

const validToken = async () => {
  const storageData = localStorage.getItem("authToken");
  if (storageData) {
    const data = await api.validateToken(storageData);
    if (data.user) {
      setUser(data.user);
    }
  }
}

return (
  <AuthContext.Provider value={ user, ...}> 
    {children}
  </AuthContext.Provider>
);
}
```

Answer 1

使用

useNavigate()

。

import { useNavigate } from "react-router-dom";

const App = () => {
  const authenticationToken = getAuthenticationToken();
  const navigate = useNavigate();

  useEffect(() => {
    if (!!authenticationToken) {
      navigate("/login");
    }
  }, [authenticationToken]);
}

等等