Добрый день. Вот и подъехала вторая часть статьи про nuxt, в которой мы рассмотрим как реализовать регистрацию пользователей. Итак приступим...
Делаем регистрацию пользователей на фронтенде
Для начала в командной строке в папке проекта устанавливаем модуль авторизации, пишем
npm install --save-exact @nuxtjs/auth-next
Заходим в папку pages нашего проекта и в ней создаем файл registration.vue, с таким содержимым:
<template>
<div>
<h1 class="text-center">Регистрация</h1>
<v-form @submit.prevent="registerUser" class="px-12 py-12 text-center">
<div>
<v-text-field label="Имя пользователя" type="text" v-model="login.user" />
</div>
<div>
<v-text-field label="Пароль" type="password" v-model="login.password" />
</div>
<div>
<v-btn class="primary" type="submit">Войти</v-btn>
</div>
</v-form>
</div>
</template>
<script>
export default {
data () {
return {
info: '',
login: {
user: '',
password: ''
}
}
},
methods: {
async registerUser () {
try {
await this.$axios.post('/api/auth/register', {
login: this.login.user,
password: this.login.password
}).then(response => (this.info = response))
console.log(this.info)
} catch (err) {
console.log(err)
}
}
}
}
</script>
Тут все максимально просто. В первом блоке кода мы создаем форму с полями ввода имени пользователя и пароля и простая кнопка. На саму форму вешаем событие "registerUser", которое будет выполнятся при отправке формы. Далее мы создаем в поле data, переменные и объекты, которые будут принимать данные формы. И создаем сам метод registerUser для отправки формы в серверную часть. На этом со страницей регистрации закончили, также можно добавить красивые уведомления, после прохождения регистрации при помощи модуля @nuxtjs/toast.
Итак, переходим к серверной части нашего приложения.
Делаем модель пользователей на бэкенде
Для начала мы переходим в папку api, и в ней создаем папку model. В папке model создаем файл users.js с таким содержимым:
const mongoose = require("mongoose");
const path = require("path");
const usersSchema = new mongoose.Schema({
login: {
type: String,
required: true,
unique: true,
},
admin: {
type: Boolean,
default: false,
required: false,
},
createdDate: {
type: Date,
default: Date.now
},
password: {
type: String,
required: true,
}
});
module.exports = mongoose.model("users", usersSchema);
Мы создали модель пользователя в базе данных MongoDB. В этом файле мы прописываем какие поля и какой тип данных у нас будет иметь сам пользователь.
Уникальное поле login с типом данных строка.
Поле admin с булевым типом данных, которое по умолчанию является false.
Поле дата создания и поле пароль.
Делаем регистрацию пользователей на бэкенде
Начнем с того, что в нашей папке api в файл index.js добавим такие строки:
const authRoutes = require('./routes/auth')
app.use('/auth', authRoutes)
Этими строками мы подключаем новый маршрут для авторизации и регистрации. Чуть позже все поймете...
В папке api создаем папку routes и уже в папке routes делаем файл auth.js, который у нас будет отвечать за авторизацию и регистрацию пользователей. В файл auth.js вставляем содержимое:
//подключаем все нужные модули
const express = require("express");
const router = express.Router();
const { Nuxt, Builder } = require('nuxt');
const app = express();
const bodyParser = require("body-parser");
const jwt = require('express-jwt');
const jsonwebtoken = require('jsonwebtoken');
const cookieParser = require('cookie-parser');
require('dotenv').config()
const users = require('../model/users')
const bcrypt = require('bcrypt')
app.use(express.json());
app.use(cookieParser());
//создаем функцию хэширования нашего пароля, которую будем чуть позже использовать
async function generatePasswordHash(plainPassword) {
return await bcrypt.hash(plainPassword, 12)
}
//создаем функцию создания нового пользователя в таблице users нашей базы
async function CreateUser(login, password) {
return await users.create({ login, password })
.then((data) => {
return data
}).catch((error) => {
throw error
})
}
//далее мы принимаем данные, отправленные из формы на фронтенде, //хэшируем пароль и вызхываем функцию создания пользователя //CreateUser
router.post('/register', async (req, res) => {
const password = req.body.password
const login = req.body.login
const hashedPassword = await generatePasswordHash(password)
await CreateUser(login, hashedPassword)
.then(() => {
res.send({ message: 'Аккаунт создан' })
}).catch((err) => {
throw err
})
})
module.exports = router;
Теперь можно попробовать отправить данные через форму регистрации и посмотреть запись данные в нашу базу.
На этом пока все, в данной статье мы сделали регистрацию. В следующей статье рассмотрим авторизацию пользователей.