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

Question

MishaXXL @MishaXXL

Next.js

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

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

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

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

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

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 апр.

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

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

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

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

Next.js

Простой
Как сделать поля width и height к компонента Image необязательными?
- 1 подписчик
- 17 часов назад
- 28 просмотров
1

ответ
Next.js

+1 ещё

Простой
React Admin Nest JS Next JS в чем ошибка?
- 1 подписчик
- вчера
- 42 просмотра
1

ответ
Next.js

+1 ещё

Простой
Выбор технологии для Front-end?
- 1 подписчик
- 12 нояб.
- 97 просмотров
2

ответа
JavaScript

+2 ещё

Простой
Как сделать отложенную инициализацию инстанса axios?
- 2 подписчика
- 05 нояб.
- 129 просмотров
1

ответ
TypeScript

+1 ещё

Простой
Next JS как исправить эту ошибку?
- 1 подписчик
- 05 нояб.
- 45 просмотров
1

ответ
Socket.io

+2 ещё

Простой
Nest JS Socket io почему с фронтенда не подключается?
- 1 подписчик
- 03 нояб.
- 34 просмотра
0

ответов
React

+1 ещё

Средний
Почему не выводится объект theme?
- 1 подписчик
- 02 нояб.
- 47 просмотров
0

ответов
Next.js

Простой
Почему функция reset не перезапускает page?
- 1 подписчик
- 31 окт.
- 34 просмотра
0

ответов
Next.js

+1 ещё

Простой
Почему не отображаются изображения из сервера на сайте nextjs?
- 1 подписчик
- 18 окт.
- 63 просмотра
2

ответа
JavaScript

+1 ещё

Простой
Quill editor как задать лимит на размер изображения?
- 1 подписчик
- 13 окт.
- 74 просмотра
1

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

Программист 1С

Автомакон

от 200 000 до 400 000 ₽

Бизнес/Системный аналитик

Wanted. • Москва

До 250 000 ₽

Разработчик Node.js / BAS (Browser Automation Studio)

Smart Sellers

от 100 000 до 200 000 ₽

Поставить сайт на хостинг и настроить БД

16 нояб. 2024, в 12:00

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

Автоматизация ежедневных задач, опыт с агентами в Phidata

16 нояб. 2024, в 10:29

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

Доработка проекта на CS2

14 нояб. 2024, в 22:04

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

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

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

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

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