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

Question

MishaXXL @MishaXXL

Next.js

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

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

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

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

Вопрос задан 18 апр.
59 просмотров

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

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

szQocks @szQocks

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

Написано 18 апр.
MishaXXL @MishaXXL Автор вопроса

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

Написано 18 апр.
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 }, в общем включай голову
Написано 18 апр.

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

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

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

Войти через центр авторизации

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

RabbitMQ

+1 ещё

Простой
Запрос к rabbitMq напрямую с клиента nextjs и архитектура уведомлений?
- 2 подписчика
- 26 апр.
- 38 просмотров
0

ответов
JavaScript

+1 ещё

Средний
Как в Next.js закешировать изображение без build?
- 1 подписчик
- 25 апр.
- 40 просмотров
0

ответов
JavaScript

+2 ещё

Средний
Как изменить содержание блока програмно со свойством contentEditable?
- 1 подписчик
- 23 апр.
- 107 просмотров
0

ответов
Next.js

Средний
Как обновить верстку на NEXT.JS c Wordpress?
- 1 подписчик
- 22 апр.
- 77 просмотров
1

ответ
Next.js

Простой
Как оптимизированно использовать хуки в nextjs?
- 1 подписчик
- 21 апр.
- 43 просмотра
0

ответов
HTTP Cookies

+1 ещё

Средний
Почему не берётся cookie?
- 1 подписчик
- 17 апр.
- 78 просмотров
0

ответов
Redux

+1 ещё

Средний
Как правильно использовать redux с next.js?
- 2 подписчика
- 05 апр.
- 133 просмотра
0

ответов
Next.js

Простой
Как в уже существущем Nextjs проекте перенастроить роутинг?
- 1 подписчик
- 29 мар.
- 39 просмотров
0

ответов
React

+1 ещё

Средний
Как в next js добавить класс к элементу?
- 1 подписчик
- 27 мар.
- 94 просмотра
2

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

Аналитик 1С ЗУП

ЭР-Телеком Холдинг • Екатеринбург

от 100 000 до 150 000 ₽

Senior Backend Engineer в агрегатор нейросетей (150к DAU)

NN Media

от 300 000 до 500 000 ₽

Junior/Middle UI/UX Designer

Hodl Hodl

от 1 200 до 2 500 $

Спарсить статейный сайт, перевести по АПИ, сделать админку

01 мая 2024, в 21:58

20000 руб./за проект

Написать пересказ манги

01 мая 2024, в 21:50

3000 руб./за проект

Векторные иллюстрации (5 шт)

01 мая 2024, в 21:43

10000 руб./за проект

не нужно хранить в сторе токен для авторизации, кто вам сказал что нужно это делать ? что за идиота на ютубе вы там смотрите, уже 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 можно работать со стейт менеджером для хранения токена авторизации?

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

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

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