Руководство по реализации аутентификации auth0 в вашем проекте Nuxt3.

Я пробовал Nuxt3 для своего нового проекта и хотел реализовать auth0 как аутентификацию как услугу. На момент написания этого блога я не смог найти для этого модуль Nuxt, доступный для более старой версии Nuxt. Поэтому я подумал, что этот небольшой обходной путь может быть полезен и другим, пока они не выпустят новый модуль Nuxt3 для auth0.

Итак, давайте начнем с проекта Nuxt3.

npx nuxi init nuxt-app

Я использую библиотеку JavaScript из auth0 «@auth0/auth0-spa-js».

npm i @auth0/auth0-spa-js

Из документа это выглядит так: чтобы создать глобальное промежуточное ПО, нам просто нужно добавить суффикс «глобальный» к имени файла:

В этом файле мы напишем нашу логику, которая будет запускаться перед загрузкой каждого маршрута (для Nuxt это будет каждая страница). Это то, что нам нужно для проверки подлинности.

Вот код для auth.global.ts:

В приведенном выше коде вам понадобится клиент аутентификации, который вы можете добавить либо в свой магазин, либо в другое место, где вы также можете поделиться этим файлом с компонентами Vue.js.

Давайте посмотрим, чего мы собираемся достичь:

  1. Нам нужна аутентификация, когда кто-то напрямую переходит на другие страницы, но не на домашнюю страницу.
  2. Нам также нужна аутентификация, когда кто-то нажимает кнопку входа.

Вот файл app.vue:

Давайте создадим About.vue (для примерного маршрута) и index.vue (для домашнего маршрута):

Теперь мы должны увидеть, как все это работает. Давайте проверим это.

npm run dev

Советы:

Убедитесь, что вы правильно настроили URL-адреса перенаправления в настройках платформы Auth0; например, я настроил «http://localhost:3000» для URI перенаправления и для URI выхода, и то же самое внутри моего приложения. Однако перенаправление выхода из вашего приложения вы можете изменить по адресу:

await auth.logout({    returnTo: window.location.origin,  });

Вы можете проверить Github Repo здесь.

Надеюсь, это полезно. Не стесняйтесь хлопать меня в ладоши. Дайте мне знать в комментарии, если есть что-то непонятное или если у вас есть какие-либо предложения. Удачного кодирования!

Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter и LinkedIn. Посетите наш Community Discord и присоединитесь к нашему Коллективу талантов.