Пытаюсь разобраться с аутентификацией в react-router без использования localStorage все работает

Question

Пытаюсь разобраться с аутентификацией в react-router без использования localStorage все работает

ок, но само собой при перезагрузке страницы нужно снова логинится

после добавления localStorage я получаю ошибку:
Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.

вопрос: в каком месте правильно будет писсать и читать токен в localStorage?

#frontend #javascript #programming #react.js #russian

0

30.03.2022

14 ответов

52 просмотра

All Cats Автор вопроса

Бехруз Б.
ну так напиши

то есть например: в главном компоненте App() я делаю: useEffect(()=>{ const token = localStorage.getItem('token') if (token) { setToken(token) } }) верно?

0

30.03.2022

🏴‍☠️

Посмотри бесплатный курс по аутентификации, там неплохой способ авторизации. Можешь сразу код в гитхабе изучить, посмотреть как делать https://courses.reactsecurity.io/react-security-fundamentals

0

30.03.2022

All Cats Автор вопроса

🏴‍☠️
Посмотри бесплатный курс по аутентификации, там не...

но в целом такой подход верный? function App() { const { setToken } = useAuth() useEffect(()=>{ const token = localStorage.getItem('token') if (token) { setToken(token) } })

0

30.03.2022

🏴‍☠️

All Cats
но в целом такой подход верный? function App() { ...

Неа. Обычно токен через куки приходит с бэка. Потом его сохраняешь в стейт-менеджере, например

0

30.03.2022

All Cats Автор вопроса

🏴‍☠️
Неа. Обычно токен через куки приходит с бэка. Пото...

я получаю jwt токен с апи: const handleLogin = async (username, password, callback) => { const data = await postData( '/api/auth', {username: username, password: password} ); setToken(data.access_token); localStorage.setItem('token', token) callback() };

0

30.03.2022

🏴‍☠️

All Cats
я получаю jwt токен с апи: const handleLogin = as...

А дальше как делаешь? Protected routes

0

30.03.2022

All Cats Автор вопроса

export function RequireAuth({children}) { let auth = useAuth(); let location = useLocation(); if (!auth.token) { // Redirect them to the /login page, but save the current location they were // trying to go to when they were redirected. This allows us to send them // along to that page after they login, which is a nicer user experience // than dropping them off on the home page. return <Navigate to="/login" state={{from: location}} replace/>; } return children; } function App() { const { setToken } = useAuth() useEffect(()=>{ const token = localStorage.getItem('token') if (token) { setToken(token) } }, []) return ( <> <AuthProvider> <Routes> <Route path="/" element={<AppLayout/>}> <Route index element={<Home/>}/> <Route path='storage' element={<RequireAuth><Storage/></RequireAuth>}/> </Route> <Route path="/" element={<AuthLayout/>}> <Route path='login' element={<Login/>}/> </Route> </Routes> </AuthProvider> </> ); }

0

30.03.2022

All Cats Автор вопроса

All Cats
export function RequireAuth({children}) { let ...

но в этом варианте у меня ошибка: TypeError: Right side of assignment cannot be destructured ругается на строку const { setToken } = useAuth()

0

30.03.2022

🏴‍☠️

А у тебя страницы через React.lazy подгружаются?

0

30.03.2022

All Cats Автор вопроса

🏴‍☠️
А у тебя страницы через React.lazy подгружаются?

нет

0

30.03.2022

🏴‍☠️

All Cats
нет

значит у тебя приложение можно через сорцы девтулза глянуть без аутентификации

0

30.03.2022

🏴‍☠️

я еще не увидел где ты обрабатываешь актуальность токена, если он просрочился, то разлогинить юзера (через axios interceptors проверять токен перед запросом)

0

30.03.2022

All Cats Автор вопроса

🏴‍☠️
я еще не увидел где ты обрабатываешь актуальность ...

я планировал это делать на беке

0

30.03.2022

Бехруз Б. · Accepted Answer

Бехруз Б.

ну так напиши

0

30.03.2022

169 похожих чатов

Пытаюсь разобраться с аутентификацией в react-router без использования localStorage все работает

14 ответов

Похожие вопросы