nextjs jwt authentication

Next.js JWT аутентификация

Приложение для подтверждения концепции для демонстрации аутентификации приложения Next.js с JWT.

Приложение сделано в предположении, что сервер рендеринга и сервер API разъединены.

Он использует этот API для аутентификации.

Идея:

Приложения на стороне сервера потрясающие. Они создают сладкое место между монолитными приложениями и одностраничными приложениями, работающими на микросервисах. Но они также добавляют сложность к своему творению. Сохранение состояния на сервере и клиенте синхронизирована, маршрутизация на клиенте и сервере, загрузка данных перед рендерингом сервера и т. Д. - это некоторые из вещей, которые делают наши приложения более сложными. Вот почему существуют такие рамки, как следующие.js, чтобы решить большинство этих проблем. Тем не менее, такие вещи, как аутентификация, остаются для нас. Это попытка реализовать аутентификацию на основе JWT. Дело в том, что мы не можем хранить токены в LocalStorage, как со спа -салоном.

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

Как это работает:

Клиент:

Пользователь отправляет запрос AUTH от клиента. В ответе получен JWT и хранится в печенье браузера и Redux Store. Затем пользователь имеет доступ к токену от клиента и может использовать его для доступа к защищенным маршрутам.

Сервер:

Когда пользователь делает запрос на страницу, также отправляются файлы cookie, поэтому сервер может их читать. Чтобы прочитать его, пользователь использует метод жизненного цикла getInitialProps , предоставленный Next.js. Он получает аргумент - объект контекста, который содержит некоторые свойства. Вы можете прочитать больше об этом здесь. На свойстве req мы можем получить доступ к свойству headers , которое содержит файл cookie с токеном. Создатель действий отправляется, чтобы сохранить токен в магазине Redux, и теперь приложение снова имеет доступ к токену.

Использование:

Установка:

Убедитесь, что у вас установлены узлы и NPM.

Также убедитесь, что у вас работает сервер API.

git clone https://github.com/alan2207/nextjs-jwt-authentication
cd nextjs-jwt-authentication
npm install

Запуск приложения:

 # Run in dev mode:
npm run dev

# Run in production:
npm run build
npm start