Аутентификация необходима для современных веб-сайтов, особенно когда разные пользователи имеют разные разрешения.

Идентификация утверждает, кем является человек. Аутентификация подтверждает эту заявленную личность.

В этой статье мы создадим страницу входа и регистрации с помощью Nuxt.js. Сервисы аутентификации и баз данных интегрируются с firebase. Я использую nuxt.js, потому что у него отличная рабочая среда. Nuxt.js также отлично подходит для SEO и универсального SSR.

Создание приложения Nuxt и настройка каталога

Сначала убедитесь, что у вас установлен npx. В этой статье я использую npx версии 6.14.4. Приведенная ниже команда создаст каталог нашего проекта.

npx create-nuxt-app auth-app

Теперь в каталоге страниц удалите все, кроме index.vue.

Давайте создадим страницы для входа и регистрации.

cd pages
touch login.vue signup.vue

На нашей странице входа в систему и регистрации будут формы для электронной почты и пароля. Данные со страниц используются firebase для аутентификации пользователя или создания нового пользователя. Итак, чтобы работать с firebase, нам нужно его инициализировать. Я использую firebase как услугу. Из корня нашего проекта перейдите в каталог services и создайте файл fireinit.js.

cd services
touch fireinit.js

Я также создаю магазин Vuex для управления состоянием в нашем приложении.

cd store
touch index.js

Наконец, мы создадим промежуточное ПО, которое проверяет наличие глобального пользователя.

cd middleware
touch router-auth.js

Создайте страницы входа и регистрации

Для страниц входа и регистрации установите отметку HTML в тегах шаблона. Наша строка формы будет иметь метку и поле ввода.

<div class="form-group row">
 <label for="email" class="col-md-4 col-form-label text-md-right">Email</label>
<div class="col-md-6">
  <input
   id="email"
   type="email"
   class="form-control"
   name="email"
   value
   required
   autofocus
   v-model="form.email"
  />
 </div>
</div>

Убедитесь, что в верхней части формы входа нет authUser. Форма входа появляется, если пользователь не авторизовался.

<form v-if=”!authUser” action=”#” v-on:submit.prevent>

Если пользователь входит в систему, мы дадим возможность выйти из системы.

<div v-else>
 Welcome {{authUser}},
 <button type=”submit” @click=”logout()” class=”btn btn-   primary”>Logout</button>
</div>

В signup.vue создайте форму и передайте эти данные функции signup.

<button @click=”signUp”>Sign Up</button>

Используйте v-модель для получения данных из полей ввода. После передачи пользовательских данных либо перехватите ошибки, либо создайте новую учетную запись с помощью функции createUserWithEmailAndPassword из аутентификации firebase. Убедитесь, что учетные данные пользователя хешированы, прежде чем сохранять их в базе данных.

signUp (){
 firebase.default.auth().createUserWithEmailAndPassword(this.email,this.password).then((user) => {
 alert(‘Your account has been created !’)
 },
 (err) => {
 alert(‘oops’ + err.message)
 }
 )
 }

Реализация промежуточного программного обеспечения

Промежуточное ПО используется в нашем приложении, чтобы скрыть определенные данные или страницу в зависимости от состояния нашего магазина.

export default function ({ store, error }) {
 if (!store.state.authUser) {
 error({
 message: ‘You are not connected’,
 statusCode: 403
 })
 }
}

Если в штате нашего магазина нет пользователя, мы отображаем ошибку. Мы также можем использовать промежуточное ПО, когда службы требуют от пользователя входа в систему.

Инициализировать Firebase

import * as firebase from ‘firebase/app’
import ‘firebase/auth’
import ‘firebase/firestore’
import ‘firebase/database’
var config = {
 apiKey: ‘your api key’,
 authDomain: ‘domain’,
 databaseURL: ,
 projectId: ‘yourprojectid’,
 storageBucket: ‘’,
}
!firebase.apps.length ? firebase.initializeApp(config) : ‘’
export const GoogleProvider = new firebase.auth.GoogleAuthProvider()
export const auth = firebase.auth()
export const DB = firebase.database()
export const StoreDB = firebase.firestore()
export default firebase

Здесь я инициализирую аутентификацию, базу данных и firestore. Пожалуйста, создайте новый проект в консоли firebase и добавьте к нему аутентификацию.

Магазин Nuxt

Теперь мы можем использовать нашу инициализированную базу firebase в качестве базы firebase в нашем проекте.

const firebase = require(‘../services/fireinit.js’);
export const strict = false

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

export const state = () => ({
 authUser: null,
 email: null
})

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

export const mutations = {
 SET_USER (state, user) {
 state.authUser = user
 },
 SET_EMAIL (state, value) {
 state.email = value
 }
}

Действиями в нашем магазине являются вход, выход и nuxtServerInit. Наше действие входа - это асинхронная функция, которая выполняет вход с помощью электронной почты и пароля пользователя. Он фиксируется на мутации, которая устанавливает адрес электронной почты и пользователя магазина.

async login ({ commit }, user) {
 firebase.default
 .auth()
 .signInWithEmailAndPassword(user.email, user.password)
 .then(function(firebaseuser){
 commit(‘SET_USER’, firebaseuser)
 commit(‘SET_EMAIL’, firebaseuser.user.email)
 })
 .catch((err) => {
 this.error = err.message;
 });
 },

«Logout» - это асинхронная функция, которая выполняет выход текущего пользователя.

async logout ({ commit }) {
 firebase.default
 .auth()
 .signOut()
 .then(function() {
 commit(‘SET_USER’, null)
 commit(‘SET_EMAIL’, null)
 // Sign-out successful.
 }).catch(function(error) {
 // An error happened.
 });
 }

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

nuxtServerInit ({ commit }, { req }) {
    if (req.session && req.session.authUser) {
        commit(‘SET_USER’, req.session.authUser)
        req.session.cookie=”” + req.session.authUser
    }
}

Vuex на наших страницах входа и регистрации

import { mapState } from ‘vuex’

Внутри login.vue отобразите состояние карты, как показано ниже. Теперь мы можем использовать authUser внутри нашего login.vue.

computed: mapState({
    authUser: state => state.authUser,
    mymail: state => state.email
})

Создайте методы, которые вызывают действия входа и выхода из нашего магазина. Отправляем данные нашей формы в магазин. Если он проходит, появляется приветственное сообщение с предупреждением или обнаруживаются ошибки.

async login() {
    try {
        await this.$store.dispatch(‘login’, this.form)
        alert(“Welcome, you are logged in “)
        this.error = null
    } catch (e) {
        this.error = e.message
    }
 },
 async logout () {
     try{
         await this.$store.dispatch(‘logout’)
         alert(“User logout!”)
     } catch (e) {
         this.error = e.message
     }
}

Поздравляю! У вас есть регистрация и страница входа. Удачи, добавляя дополнительные стили в ваш файл CSS!

Надеюсь, вам понравилась статья. Если у вас есть предложения или вопросы, дайте мне знать!