Как правильно обрабатывать защищенные маршруты с помощью TanStack Router + TanStack Query без пустого экрана на 403? ⇐ Javascript

[Anonymous]

Я использую TanStack Router и TanStack Query в приложении React для реализации аутентификации. Я извлекаю текущего пользователя с помощью запроса внутри AuthProvider и хочу защитить определенные маршруты в зависимости от того, прошел ли пользователь аутентификацию.
Когда запрос /auth/profile возвращает 403 (неаутентифицированный пользователь), приложение показывает пустой экран вместо отображения домашней страницы. Я хочу, чтобы домашний маршрут загружался нормально, даже если пользователь не вошел в систему, и перенаправлялся только на /login при доступе к защищенным страницам.
Вот моя текущая реализация AuthProvider:

Код: Выделить всё

const AuthContext = createContext(null);

export const AuthProvider = ({ children }: { children: React.ReactNode }) => {
const userQuery = useSuspenseQuery(fetchUserInfoOptions);

if (userQuery.isLoading) {
return Context Loading...;
}

if (userQuery.isError) {
console.log("Context Error:", userQuery.error.message);
}

const isAuthenticated =
userQuery.data.data && !userQuery.isError ? true : false;
const user = userQuery.data ? userQuery.data.data : null;

return (

{children}

);
};

Поскольку я использую useSuspenseQuery, ошибки, похоже, обходят состояние isError — поставщик никогда не регистрирует ошибку, и пользовательский интерфейс приостанавливается, что приводит к пустому экрану.
Что я хочу:
Если авторизовано → разрешить загрузку защищенных страниц

Если 403 → считать гостем → разрешить отображение общедоступных страниц обычно

Только перенаправление при доступе к защищенным маршрутам

Никаких пустых экранов из-за ошибок приостановки
Мой вопрос:
Как правильно настроить защищенные маршруты с помощью TanStack Router + TanStack Query, чтобы:

• Неудачный запрос аутентификации (403) выполнялся не приостанавливать все приложение
• Перенаправление выполняют только защищенные маршруты
• Общедоступные маршруты по-прежнему загружаются для неаутентифицированных пользователей

Следует ли удалить useSuspenseQuery, вместо этого использовать загрузчики маршрутов для проверки подлинности или обрабатывать 403 по-другому внутри функции выборки?
Любые рекомендуемые примеры или шаблоны были бы полезны!

Подробнее здесь: https://stackoverflow.com/questions/798 ... ck-query-w