Как реализовать аутентификацию и авторизацию в приложении Nuxt.js?
Реализация аутентификации и авторизации в приложении на Nuxt.js – важный аспект, позволяющий вам управлять доступом пользователей к различным частям вашего приложения. В этом ответе мы рассмотрим основные шаги для настройки аутентификации и авторизации, используя хранение токенов JWT и сторонний сервис для аутентификации, например, Firebase или Auth0.
Шаг 1: Установка необходимых библиотек
Для работы с аутентификацией вам необходимо установить некоторые пакеты. В нашем примере мы используем axios для выполнения HTTP-запросов.
npm install axios
Шаг 2: Создание плагина для аутентификации
Создайте новый файл в папке plugins (например, auth.js). Этот файл будет содержать логику для управления токеном и аутентификацией.
// plugins/auth.js
export default function ({ $axios, redirect }) {
// Добавляем интерсептор для добавления токена в заголовки запросов
$axios.onRequest(config => {
const token = localStorage.getItem('token')
if (token) {
config.headers.common['Authorization'] = `Bearer ${token}`
}
return config
})
// Проверка аутентификации при доступе к защищенным страницам
$axios.onError(err => {
if (err.response.status === 401) {
localStorage.removeItem('token')
redirect('/login')
}
})
}
Шаг 3: Добавление плагина в Nuxt.js
Чтобы Nuxt.js знал о вашем плагине, добавьте его в nuxt.config.js:
// nuxt.config.js
export default {
plugins: [
'~/plugins/auth.js'
]
}
Шаг 4: Создание страницы входа
Создайте страницу, позволяющую пользователю вводить свои учетные данные и входить в систему. Например, создайте файл login.vue в папке pages.
<template>
<div>
<h1>Вход</h1>
<form @submit.prevent="login">
<input v-model="email" type="email" placeholder="Email" required>
<input v-model="password" type="password" placeholder="Пароль" required>
<button type="submit">Войти</button>
</form>
</div>
</template>
<script>
export default {
data() {
return {
email: '',
password: ''
}
},
methods: {
async login() {
try {
const response = await this.$axios.$post('https://example.com/api/login', {
email: this.email,
password: this.password
})
localStorage.setItem('token', response.token)
this.$router.push('/')
} catch (error) {
console.error('Ошибка при входе:', error)
}
}
}
}
</script>
Шаг 5: Защита маршрутов
Далее вам необходимо защищать определенные маршруты, чтобы только аутентифицированные пользователи имели к ним доступ. Это можно сделать с помощью middleware. Создайте middleware-файл, например, auth.js в папке middleware.
// middleware/auth.js
export default function ({ redirect }) {
if (!localStorage.getItem('token')) {
return redirect('/login')
}
}
Теперь добавьте это middleware к нужным страницам:
// pages/protected.vue
<template>
<div>
<h1>Защищенная страница</h1>
</div>
</template>
<script>
export default {
middleware: 'auth'
}
</script>
Шаг 6: Выход из системы
Не забудьте добавить возможность выхода из системы. Например, это можно сделать в вашем компоненте навигации:
<template>
<nav>
<button @click="logout">Выйти</button>
</nav>
</template>
<script>
export default {
methods: {
logout() {
localStorage.removeItem('token')
this.$router.push('/login')
}
}
}
</script>
Заключение
Теперь вы имеете базовую настройку аутентификации и авторизации в вашем Nuxt.js приложении. Вы можете расширить этот функционал, добавив обработку ошибок, регистрация пользователей и другие функции, необходимые для вашего проекта.