diff --git a/ui/src/router/RouteGuard.tsx b/ui/src/router/RouteGuard.tsx index a58eb168..6ea39c61 100644 --- a/ui/src/router/RouteGuard.tsx +++ b/ui/src/router/RouteGuard.tsx @@ -2,7 +2,7 @@ import { FC, ReactNode, useEffect, useState } from 'react'; import { useLocation, useNavigate, useLoaderData } from 'react-router-dom'; import { floppyNavigation } from '@/utils'; -import { TGuardFunc } from '@/utils/guard'; +import { TGuardFunc, TGuardResult } from '@/utils/guard'; import RouteErrorBoundary from './RouteErrorBoundary'; @@ -15,11 +15,10 @@ const RouteGuard: FC<{ const navigate = useNavigate(); const location = useLocation(); const loaderData = useLoaderData(); - const [grOk, setGrOk] = useState(true); - const [routeError, setRouteError] = useState<{ - code: string; - msg: string; - }>(); + const [gk, setKeeper] = useState({ + ok: true, + }); + const [gkError, setGkError] = useState(); const applyGuard = () => { if (typeof onEnter !== 'function') { return; @@ -30,14 +29,16 @@ const RouteGuard: FC<{ page, }); - setGrOk(gr.ok); - if (gr.error?.code && /403|404|50X/i.test(gr.error.code.toString())) { - setRouteError({ - code: `${gr.error.code}`, - msg: gr.error.msg || '', - }); + setKeeper(gr); + if ( + gk.ok === false && + gk.error?.code && + /403|404|50X/i.test(gk.error.code.toString()) + ) { + setGkError(gk.error); return; } + setGkError(undefined); if (gr.redirect) { floppyNavigation.navigate(gr.redirect, { handler: navigate, @@ -53,12 +54,22 @@ const RouteGuard: FC<{ */ applyGuard(); }, [location]); + + let asOK = gk.ok; + if (gk.ok === false && gk.redirect) { + /** + * It is possible that the route guard verification fails + * but the current page is already the target page for the route guard jump + * This should render `children`! + */ + + asOK = floppyNavigation.equalToCurrentHref(gk.redirect); + } + return ( <> - {grOk ? children : null} - {!grOk && routeError ? ( - - ) : null} + {asOK ? children : null} + {gkError ? : null} ); }; diff --git a/ui/src/utils/floppyNavigation.ts b/ui/src/utils/floppyNavigation.ts index a7fa9970..9ba75426 100644 --- a/ui/src/utils/floppyNavigation.ts +++ b/ui/src/utils/floppyNavigation.ts @@ -5,10 +5,10 @@ import Storage from '@/utils/storage'; import { REDIRECT_PATH_STORAGE_KEY } from '@/common/constants'; import { getLoginUrl } from '@/utils/userCenter'; -const differentCurrent = (target: string, base?: string) => { +const equalToCurrentHref = (target: string, base?: string) => { base ||= window.location.origin; const targetUrl = new URL(target, base); - return targetUrl.toString() !== window.location.href; + return targetUrl.toString() === window.location.href; }; const storageLoginRedirect = () => { @@ -54,7 +54,7 @@ export interface NavigateConfig { const navigate = (to: string | number, config: NavigateConfig = {}) => { let { handler = 'href' } = config; if (to && typeof to === 'string') { - if (!differentCurrent(to)) { + if (equalToCurrentHref(to)) { return; } /** @@ -62,7 +62,7 @@ const navigate = (to: string | number, config: NavigateConfig = {}) => { * 2. Auto storage login redirect */ if (to === RouteAlias.login || to === getLoginUrl()) { - if (!differentCurrent(RouteAlias.login)) { + if (equalToCurrentHref(RouteAlias.login)) { return; } storageLoginRedirect(); @@ -133,4 +133,5 @@ export const floppyNavigation = { isFullLink, isRoutableLink, handleRouteLinkClick, + equalToCurrentHref, };