Как правильно настроить редирект после авторизации?

Question

[Alex Ozerov]

Токен авторизации сохраняется в LocalStorage. Дальше в редаксе меняется флаг на true и собственно React решает - делать редирект или рендерить компонент.

const isAuth = useSelector(state => state.user.auth)

return isAuth ? <Redirect to='/user' />  : <Component />

Все работает, но при обновлении страницы, происходит запрос с проверкой токена, это занимает долю секунды, но эту долю секунды отображается страница логина, приходит ответ сервера - токен валидный - и уже тогда происходит редирект. Как организовать правильно редирект, что бы убрать мимолетное отображение страницы логина?

Answer 1

[Дарья]

Как вариант выставлять в сторе параметр isLoading true и по нему отображать лоадер. Как только запрос пройдет, isLoading выставлять в false и соответственно по результатам запроса отображать компонент либо редиректить куда надо

Comments

[Дарья]

Что-то типо такого

const isAuth = useSelector(state => state.user.auth)
const isLoading =  useSelector(state => state.isLoading)

if (isLoading) return <Loader />
return isAuth ? <Redirect to='/user' />  : <Component />

[Alex Ozerov]

preloader был как последний вариант, думал может еще накидают пару реализаций. Спасибо за ответ.