javascript - 如果用户已登录并且在所有其他情况下显示公共(public)路线，如何重定向到/仪表板公共(public)路线/登录和/注册？

Question

我有两种类型的路由 Public 和 Private。

只有用户登录后才能访问所有私有(private)路由:

return tokenService.token 
  ? (
    <>
      <Header />
      <Suspense fallback={<Spinner className="spinner" />}>
        <Outlet />
      </Suspense>
      <Footer />
    </>
  ) : (
    <Navigate to={'/login'} replace />
  );

然后我们有公共(public)路线。可以在除 /login 和 /registration 路由之外的任何地方访问，即使它们是公开的，如果用户已登录，它们也应该被重定向到/dashboard所有其他情况，我们显示公共(public)路线。

这是我们的公共(public)路由文件

return (
  <>
    <AuthHeader />
    <Suspense fallback={<Spinner className="spinner" />}>
      <Outlet />
    </Suspense>
    <Footer />
  </>
)

主要路线文件

<Routes>
  <Route element={<PublicRoute />}>
    <Route path={'/login'} element={<Login />} />
    <Route
      path={'/registration'}
      element={<Registration />}
    />
    <Route path={'/terms'} element={<Terms />} />
    <Route path={'/privacy'} element={<Privacy />} />
  </Route>
  <Route element={<AuthRoute />}>
    <Route path={'/dashboard'} element={<MyProfile />} /> 
  </Route>
  <Route path={'/notfound'} element={<PageNotFound />} />
</Routes>

那么将 "/login" 和 "/registration" 路由重定向到 "/dashboard" 路由的最有效方法是什么？如果用户已登录并且在所有其他情况下都显示公共(public)路线？

所以用户应该能够从任何地方访问"/terms"，但是如果他登录了，那么他就不能访问"/login" 和"/registration" 路由(重定向到 "/dashboard")。

在当前代码中，即使用户已登录，他也可以访问所有公共(public)路由。

Answer 1

为登录和仪表板路由创建一个匿名路由保护器，它与私有(private)路由保护器相反。

例子:

const AnonymousRoute = () => {
  return tokenService.token
    ? <Navigate to="/dashboard" replace />
    : <Outlet />;
};

<Routes>
  <Route element={<PublicRoute />}>
    <Route element={<AnonymousRoute />}>
      <Route path="/login" element={<Login />} />
      <Route
        path="/registration"
        element={<Registration />}
      />
    </Route>
    <Route path="/terms" element={<Terms />} />
    <Route path="/privacy" element={<Privacy />} />
  </Route>
  <Route element={<AuthRoute />}>
    <Route path="/dashboard" element={<MyProfile />} /> 
  </Route>
  <Route path="/notfound" element={<PageNotFound />} />
</Routes>