В этом посте я поделюсь своим опытом использования Redwood.JS. Вы можете создать полную систему аутентификации (логин, регистрация, сброс пароля) менее чем за 20 минут.

Если вы не хотите читать, вы можете посмотреть видео на YouTube, которое я сделал со всем этим контентом.

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

Прежде всего, создайте новый проект Redwood.JS, запустив его в своем терминале.

yarn create redwood-app — ts ./nameOfTheProject

При этом у вас должна быть папка с именем «nameOfTheProject», которое вы использовали, откройте эту папку в текстовом редакторе по вашему выбору.

Теперь давайте создадим базу данных и подключим ее к проекту.

Я буду использовать pgAdmin4 локально, чтобы я мог протестировать базу данных локально. По сути, вы просто входите в pgAdmin4, выбираете свой локальный сервер, щелкаете правой кнопкой мыши, создаете и создаете базу данных.

В диалоговом окне добавьте имя для базы данных и посмотрите на пользователя, выбранного в части «владелец».

Нажмите «Сохранить», и у вас должна быть запущена база данных.

Теперь давайте подключим базу данных к проекту, перейдите в ваш текстовый редактор и откройте файл «.env». Вы должны увидеть строку, которая говорит что-то вроде:

#DATABASE_URL=postgres://user:[email protected]:5432/database_name

Удалите «#» и измените «пользователь» на имя пользователя, выбранного вами в части «владелец» процесса создания базы данных, измените «пароль» на пароль, который вы используете с этим пользователем, и измените «postgreshost .com» на «localhost», так как вы сейчас запускаете это локально, и измените «database_name» на имя базы данных, которую вы добавили ранее.

И с этим у вас есть база данных, подключенная к вашему проекту.

Теперь давайте создадим модель пользователя. Идти к

api/db/schema.prisma

И добавьте следующий код снипа в конец файла:

model User {
   id                  Int       @id @default(autoincrement())
   email               String    @unique
   hashedPassword      String
   salt                String
   resetToken          String?
   resetTokenExpiresAt DateTime?
   name                String
}

Сохраните это и теперь запустите эту команду в своем терминале:

yarn rw prisma migrate dev

На этом ваша база данных готова.

Теперь давайте создадим домашнюю страницу. Для простоты предположим, что пользователи не должны иметь доступа к домашней странице, если они не прошли проверку подлинности. Запустите это в своем терминале:

yarn redwood generate page home /

Теперь вы должны увидеть папку «Домашняя» по этому пути:

web/src/pages/

С парой файлов. Вы также должны увидеть, что ваша домашняя страница уже изменилась.

Теперь давайте создадим систему аутентификации. Запустите это в своем терминале:

yarn rw setup auth dbAuth

Это создаст всю логику в бэкэнде для работы вашей системы аутентификации. Теперь, чтобы создать пользовательский интерфейс для этого, просто запустите это в терминале:

yarn rw g dbAuth

Теперь перейдите к:

web/src/Routes.tsx

Вы увидите что-то вроде этого:

Вам придется изменить «Домашний» маршрут, чтобы пользователи могли получить к нему доступ только в том случае, если они прошли аутентификацию. Ваш файл отверстия должен выглядеть так:

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

Redwood.JS великолепен, потому что вы можете многое пропустить и что-то запустить за считанные минуты. Надеюсь, вам понравился этот пост!