关于react router 认证的问题？

Question

export const AuthRouter = (props: { children: JSX.Element }) => {
  const { pathname } = useLocation();
  const { token } = useSelector((state: StoreProps) => state.global);
  debugger;
  //如果不判断是否是登录页，就会出现死循环
  if (!token/*  && pathname !== "/login" */) return <Navigate to="/login" replace />;
  return props.children;
};

// demo
const AuthRouter = (props: { children: JSX.Element }) => {
    const { pathname } = useLocation();
    const route = searchRoute(pathname, rootRouter);
    // * 在跳转路由之前，清除所有的请求
    axiosCanceler.removeAllPending();

    // * 判断当前路由是否需要访问权限(不需要权限直接放行)
    if (!route.meta?.requiresAuth) return props.children;

    // * 判断是否有Token
    const token = store.getState().global.token;
    debugger;
    //没有判断是否是登录页，也没有出现死循环
    if (!token) return <Navigate to="/login" replace />;

    // * Dynamic Router(动态路由，根据后端返回的菜单数据生成的一维数组)
    const dynamicRouter = store.getState().auth.authRouter;
    // * Static Router(静态路由，必须配置首页地址，否则不能进首页获取菜单、按钮权限等数据)，获取数据的时候会loading，所有配置首页地址也没问题
    const staticRouter = [HOME_URL, "/403"];
    const routerList = dynamicRouter.concat(staticRouter);
    // * 如果访问的地址没有在路由表中重定向到403页面
    if (routerList.indexOf(pathname) == -1) return <Navigate to="/403" />;

    // * 当前账号有权限返回 Router，正常访问页面
    return props.children;
};

如果不判断是否是登录页，就会出现死循环
但是我看都demo都是没有单独判断是不是登录页，也能够去登录页，并且不会死循环
这是为什么？

Answer 1

export const AuthRouter = (props: { children: JSX.Element }) => {
  const { pathname } = useLocation();
  // 没权限的页面要直接放行，否则一直会去登录页
  const route = searchRoute(pathname, rootRoutes);
  if (route?.meta?.requireAuth === false) return props.children;
  // 有权限页面才做token判断
  const { token } = useSelector((state: StoreProps) => state.global);
  debugger;
  if (!token) return <Navigate to="/login" replace />;
  return props.children;
};