چگونه احراز هویت را در یک اپلیکیشن Nuxt.js پیاده‌سازی کنیم؟

مقدمه

در این آموزش، نحوه‌ی پیاده‌سازی احراز هویت (Authentication) در یک اپلیکیشن Nuxt.js با استفاده از ماژول Auth را یاد می‌گیرید.

برای اهداف این آموزش، از JWT (JSON Web Token) برای احراز هویت استفاده می‌شود.

سورس‌کد این اپلیکیشن در GitHub موجود است.

هشدار:
برخی از پکیج‌های استفاده‌شده دارای آسیب‌پذیری‌های شناخته‌شده هستند. در محیط Production، باید این مشکلات با به‌روزرسانی یا استفاده از جایگزین‌ها حل شوند. اما برای آموزش، همین نسخه کافی است.

پیش‌نیازها

  • نصب Node.js روی سیستم محلی

  • نصب Git (اختیاری، برای Clone کردن API)

  • آشنایی اولیه با Vue.js و Nuxt.js

نسخه‌های تست‌شده:

  • Node v13.13.0

  • npm v6.14.4

  • Vue v2.6.11

  • Nuxt v2.12.2

مرحله ۱ — راه‌اندازی API نمونه

Clone کردن API نمونه:

git clone https://github.com/do-community/jwt-auth-api.git
cd jwt-auth-api
npm install

اگر با sqlite3 مشکل داشتید، روش‌های زیر پیشنهاد می‌شود:

  1. داون‌گرید Node به نسخه 10.20.1

  2. حذف package-lock.json و نصب دوباره

  3. تغییر نسخه sqlite3 در package.json به نسخه سازگار

نام فایل .env.example را تغییر دهید:

mv .env.example .env

تولید APP_KEY:

npx @adonisjs/cli@4.0.12 key:generate

اجرای migrationها:

npx @adonisjs/cli@4.0.12 migration:run

شروع API:

npm start

API روی:

http://127.0.0.1:3333/api

مرحله ۲ — ساخت اپلیکیشن Nuxt.js

ایجاد پروژه Nuxt با vue-cli:

npx vue-cli@2.9.6 init nuxt/starter nuxt-auth
cd nuxt-auth
npm install
npm run dev

اپلیکیشن روی:

http://localhost:3000

مرحله ۳ — نصب ماژول‌های Nuxt.js

نصب ماژول‌های Auth و Axios:

npm install @nuxtjs/auth@4.5.1 @nuxtjs/axios@5.3.1 --save

افزودن ماژول‌ها به nuxt.config.js:

modules: [
'@nuxtjs/axios',
'@nuxtjs/auth'
]

تنظیمات Axios و Auth:

axios: {
baseURL: 'http://127.0.0.1:3333/api'
},auth: {
strategies: {
local: {
endpoints: {
login: { url: ‘login’, method: ‘post’, propertyName: ‘data.token’ },
user: { url: ‘me’, method: ‘get’, propertyName: ‘data’ },
logout: false
}
}
}
}

مرحله ۴ — ساخت Navbar

اضافه کردن Bulma CSS در nuxt.config.js:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">

ساخت components/Navbar.vue:

<template>
<nav class="navbar is-light">
<div class="container">
<div class="navbar-brand">
<nuxt-link class="navbar-item" to="/">Nuxt Auth</nuxt-link>
</div>
</div>
</nav>
</template>

بروزرسانی layout پیش‌فرض:

<template>
<div>
<Navbar/>
<nuxt/>
</div>
</template><script>
import Navbar from ‘~/components/Navbar’

export default {
components: { Navbar }
}
</script>

صفحه اصلی (pages/index.vue):

<template>
<section class="section">
<div class="container">
<h1 class="title">Nuxt Auth</h1>
</div>
</section>
</template>

مرحله ۵ — ثبت‌نام کاربران

pages/register.vue:

<template>
<section class="section">
<div class="container">
<form @submit.prevent="register">
<input type="text" v-model="username" required/>
<input type="email" v-model="email" required/>
<input type="password" v-model="password" required/>
<button type="submit">Register</button>
</form>
</div>
</section>
</template><script>
export default {
data() {
return { username: ”, email: ”, password: ”, error: null }
},
methods: {
async register() {
try {
await this.$axios.post(‘register’, { username: this.username, email: this.email, password: this.password })
await this.$auth.loginWith(‘local’, { data: { email: this.email, password: this.password } })
this.$router.push(‘/’)
} catch (e) {
this.error = e.response.data.message
}
}
}
}
</script>

Notification.vue:

<template>
<div class="notification is-danger">{{ message }}</div>
</template><script>
export default { props: [‘message’] }
</script>

مرحله ۶ — مدیریت وضعیت لاگین

store/index.js:

export const getters = {
isAuthenticated(state) { return state.auth.loggedIn },
loggedInUser(state) { return state.auth.user }
}

Navbar.vue (بروزرسانی با computed):

<script>
import { mapGetters } from 'vuex'
export default {
computed: { ...mapGetters(['isAuthenticated', 'loggedInUser']) }
}
</script>

مرحله ۷ — ورود کاربران

pages/login.vue:

<template>
<form @submit.prevent="login">
<input type="email" v-model="email"/>
<input type="password" v-model="password"/>
<button type="submit">Log In</button>
</form>
</template><script>
export default {
data() { return { email:”, password:”, error:null } },
methods: {
async login() {
try {
await this.$auth.loginWith(‘local’, { data: { email:this.email, password:this.password } })
this.$router.push(‘/’)
} catch(e) {
this.error = e.response.data.message
}
}
}
}
</script>

مرحله ۸ — نمایش پروفایل

pages/profile.vue:

<template>
<section>
<h2>My Profile</h2>
<p>Username: {{ loggedInUser.username }}</p>
<p>Email: {{ loggedInUser.email }}</p>
</section>
</template><script>
import { mapGetters } from ‘vuex’
export default { computed: { …mapGetters([‘loggedInUser’]) } }
</script>

مرحله ۹ — خروج کاربران

Navbar.vue:

<a @click="logout">Logout</a>
methods: {
async logout() { await this.$auth.logout() }
}

مرحله ۱۰ — محدود کردن صفحه پروفایل

pages/profile.vue:

export default { middleware: 'auth' }

مرحله ۱۱ — Middleware مهمان

middleware/guest.js:

export default function ({ store, redirect }) {
if (store.state.auth.loggedIn) return redirect('/')
}

اضافه کردن به صفحات Login و Register:

export default { middleware: 'guest' }

جمع‌بندی

در این آموزش یاد گرفتید:

  • نحوه پیاده‌سازی احراز هویت در Nuxt.js با Auth module

  • مدیریت جریان ورود و خروج با middleware

  • استفاده از JWT و Axios برای ارتباط با API

 

 

از همراهی شما با پارمین کلود متشکریم.

Click to rate this post!
[Total: 0 Average: 0]
avatar

نویسنده :

کیانا
مقالات نویسنده

مطالب مرتبط :

نظرات کاربران

دیدگاهی بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

حالت تمام صفحه

دسته بندی :

برنامه نویسی،برنامه نویسی

نوشته شده در :

۱۲ بهمن ۱۴۰۴

بروزرسانی شده در :

12 بهمن 1404

بازدید ها :

بازدید

جدید ترین نوشته ها :

ساخت ربات دیسکورد با پایتون و استقرار روی سرور اوبونتو 20.04

آموزش کامل راه‌اندازی Nginx داخل LXD Container روی Ubuntu 18.04

آموزش نصب Apache Kafka روی Ubuntu 20.04

تبدیل اعداد به رشته در پایتون

راهنمای کامل تبدیل Integer به Float در Python 3

آموزش نصب و پیکربندی LXD روی Ubuntu 20.04