Как в NextJS можно работать со стейт менеджером для хранения токена авторизации?

Question

MishaXXL @MishaXXL

Next.js

Как в NextJS можно работать со стейт менеджером для хранения токена авторизации?

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

Как в нексте вообще работать со стейт менеджером и есть ли он там?

Хочу реализовать авторизации через токены на нексте, но немного запутался

Вопрос задан более года назад
175 просмотров

3 комментария

Подписаться 1 Простой 3 комментария

szQocks @szQocks

не нужно хранить в сторе токен для авторизации, кто вам сказал что нужно это делать ? что за идиота на ютубе вы там смотрите, уже 5 человек задаёт этот вопрос с токеном в сторе, за последние пару мес

Написано более года назад
MishaXXL @MishaXXL Автор вопроса

szQocks, ну не он в сторе, а сам юзер появляется в сторе при удачной авторизации и уже при наличии его расширяются доступы на роуты

Написано более года назад
szQocks @szQocks
MishaXXL, если стор без ssr, то что-то типа этого

import { cookies } from 'next/headers' import { ClientUserProvider} from '...'; const getUser = async () => { return fetch(`${process.env.NEXT_PUBLIC_API_URL}/api/refresh`, { next: { revalidate: 0 }, method: "GET", headers: { Cookie: cookies().toString() }, }) .then(res => res.json()) .catch(e => { console.log(e); return { user: null }; }) } export default async function RootLayout({ children }) { const user = await getUser(); return ( <html lang="en"> <body> <ClientUserProvider INIT_STATE={ user }> {children} </ClientUserProvider> </body> </html> ) }

всё что попадает в children, там могут быть как серверные так и клиентские компоненты
в примере подразумевается что сам ClientUserProvider - это клиентский компонент в котором в самом начале написано "use client"

вообще до этого мог бы и сам додуматься, проштрудировав всю документацию как в реакте так и в нексте

а этот RootLayout , должен находиться в папке app а сам файл с названием layout.js или ts если пишешь на ts

так же в getUser можно проверять а есть ли кука, и нужно ли отправлять запрос или нет, в принципе если куки нет, то можно сразу возвращать { user: null }, в общем включай голову
Написано более года назад

Помогут разобраться в теме Все курсы

Учебный центр IBS

WEB-023 React Advanced: продвинутые темы

1 неделя

Далее
OTUS

Fullstack developer

14 месяцев

Далее

Пригласить эксперта

Ваш ответ на вопрос

Войдите, чтобы написать ответ

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

CSS

+2 ещё

Средний
Как решить проблему с появлением пустого пространства под drawer из shadcn?
- 2 подписчика
- 02 окт.
- 103 просмотра
1

ответ
Next.js

Простой
Какой вид рендеринга лучше использовать для SEO интернет магазина и блога на NextJS?
- 1 подписчик
- 28 сент.
- 83 просмотра
1

ответ
Next.js

Простой
Почему при build проекта на Next js ошибка TypeError: fetch failed ([cause]: ConnectTimeoutError: Connect Timeout Error)?
- 1 подписчик
- 14 сент.
- 362 просмотра
0

ответов
Next.js

Простой
Ошибка конфигурации NextAuth.js (Auth.js v5) на Vercel. Ошибка 500 /api/auth/error?error=Configuration, как решить?
- 1 подписчик
- 25 авг.
- 114 просмотров
0

ответов
Тестирование ПО

+1 ещё

Простой
Как спарсить стили из scss modules с Tailwind?
- 1 подписчик
- 20 авг.
- 62 просмотра
0

ответов
Next.js

Простой
NEXT/SEO: можно ли убрать из html тег для noindex, nofollow?
- 1 подписчик
- 14 июл.
- 39 просмотров
0

ответов
React

+4 ещё

Простой
Как правильно именовать компоненты форм?
- 1 подписчик
- 12 июл.
- 234 просмотра
1

ответ
Next.js

Средний
Правильно ли выполнять HTTP-запрос для получения профиля в callback session?
- 1 подписчик
- 30 июн.
- 49 просмотров
0

ответов
Компьютерные сети

+2 ещё

Простой
Почему приложение не может получить доступ к бэкенду?
- 2 подписчика
- 19 мая
- 901 просмотр
1

ответ
React

+3 ещё

Простой
Как сделать кликабельные аннотации в react-pdf?
- 1 подписчик
- 16 апр.
- 82 просмотра
1

ответ
Показать ещё Загружается…

Фуллстек-разработчик Next.js (App Router)

MinecraftPulse

от 200 000 ₽

Middle+/Senior Frontend Engineer

Data Directs • Тель-Авив

от 350 000 ₽

Разработчик PHP | WordPress

Globaldrive

от 150 000 ₽

не нужно хранить в сторе токен для авторизации, кто вам сказал что нужно это делать ? что за идиота на ютубе вы там смотрите, уже 5 человек задаёт этот вопрос с токеном в сторе, за последние пару мес
szQocks, ну не он в сторе, а сам юзер появляется в сторе при удачной авторизации и уже при наличии его расширяются доступы на роуты
MishaXXL, если стор без ssr, то что-то типа этого

import { cookies } from 'next/headers' import { ClientUserProvider} from '...'; const getUser = async () => { return fetch(`${process.env.NEXT_PUBLIC_API_URL}/api/refresh`, { next: { revalidate: 0 }, method: "GET", headers: { Cookie: cookies().toString() }, }) .then(res => res.json()) .catch(e => { console.log(e); return { user: null }; }) } export default async function RootLayout({ children }) { const user = await getUser(); return ( <html lang="en"> <body> <ClientUserProvider INIT_STATE={ user }> {children} </ClientUserProvider> </body> </html> ) }

всё что попадает в children, там могут быть как серверные так и клиентские компоненты
в примере подразумевается что сам ClientUserProvider - это клиентский компонент в котором в самом начале написано "use client"

вообще до этого мог бы и сам додуматься, проштрудировав всю документацию как в реакте так и в нексте

а этот RootLayout , должен находиться в папке app а сам файл с названием layout.js или ts если пишешь на ts

так же в getUser можно проверять а есть ли кука, и нужно ли отправлять запрос или нет, в принципе если куки нет, то можно сразу возвращать { user: null }, в общем включай голову

Как в NextJS можно работать со стейт менеджером для хранения токена авторизации?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт