如何在使用react-router-dom的react中隔离经过身份验证和未经身份验证的路由

Question

这是我的

routes.tsx

文件，我只想做的是，如果用户未经身份验证，那么他/她应该无法导航到仪表板和稍后将进入应用程序的其他路线。

如果他通过了身份验证，那么他/她不应该导航到未经身份验证的路线，例如登录、注册、确认 otp，还可能有更多。目前，

isAuthenticated

函数仅在本地存储具有布尔值或不具有令牌时返回。这看起来也不错，但是这段代码中存在一些我面临的问题

• 即使令牌位于本地存储中，如果用户尝试导航到任何与身份验证相关的路线，他也能够导航到那里。
• 我想用“axios”拦截器在这里实现的另一件事是，如果用户手动删除令牌，然后尝试运行任何API，那么在拦截器中应该检查本地存储是否没有令牌，然后拦截器应该清除存储，然后导航用户回来到授权/登录

期望经过身份验证的路由和反之亦然的路由以及拦截器“axios”有一个简单且最佳的流程，而无需刷新应用程序

import { Suspense } from "react";
import { Navigate, RouteObject } from "react-router-dom";
import { isAuthenticated } from "./auth";
import { Login, Dashboard, Signup, SendOTP } from "../pages";
import { AuthLayout, PrimaryLayout } from "../layouts";

export const routes: RouteObject[] = [
  {
    path: "/dashboard",
    element: (
      <Suspense fallback={<div>...LOADING</div>}>
        {isAuthenticated() ? (
          <PrimaryLayout />
        ) : (
          <Navigate to="/auth/login" replace />
        )}
      </Suspense>
    ),
    children: [
      {
        index: true,
        element: <Dashboard />,
      },
      { path: "*", element: <Navigate to="dashboard" replace /> },
    ],
  },
  {
    path: "/auth",
    element: <AuthLayout />,
    children: [
      {
        index: true,
        element: isAuthenticated() ? (
          <Navigate to="/dashboard" replace />
        ) : (
          <Navigate to="login" replace />
        ),
      },
      {
        path: "login",
        element: (
          <Suspense fallback={<div>...LOADING</div>}>
            <Login />
          </Suspense>
        ),
      },
      {
        path: "signup",
        element: (
          <Suspense fallback={<div>...LOADING</div>}>
            <Signup />
          </Suspense>
        ),
      },
      {
        path: "confirm-otp",
        element: (
          <Suspense fallback={<div>...LOADING</div>}>
            <SendOTP />
          </Suspense>
        ),
      },
      { path: "*", element: <Navigate to="/auth/login" replace /> },
    ],
  },
  {
    path: "*",
    element: isAuthenticated() ? (
      <Navigate to="/dashboard" replace />
    ) : (
      <Navigate to="/auth/login" replace />
    ),
  },
];

Answer 1

有趣的基础知识，感谢分享