1. صفحه اصلی
  2. مقالات
  3. احراز هویت در لاراول با Nuxt.js

احراز هویت در لاراول با Nuxt.js

سعید ایمانی سعید ایمانی
30 آبان 1397
nuxtjs-laravel

ما در این پروژه از Nuxt.js به عنوان بخش front end و از لاراول به عنوان بخش back end پروژه استفاده می­کنیم.در این پروژه از یک API برای احراز هویت کاربران استفاده می­کنیم و در برگشت، یک توکن json به کلاینت ارسال می­کنیم.

بعد از اینکه کاربر ما با موفقیت وارد سایت شد (Sing in)، یک توکن jwt به کلاینت ارسال می­کنیم و بعد از آن به کاربر دسترسی به منابع درخواست داده شده را می­دهیم. همچنین از پکیج Tymon برای ایجاد توکن در سمت سرور استفاده می­کنیم.

توجه: اگر چنانچه به مباحث فریم ورک لاراول آشنایی ندارید لطفا از طریق لینک زیر دوره آموزشی صفر تا صد لاراول را مطالعه بفرمایید:

آموزش صفر تا صد لاراول به صورت پروژه محور (فروشگاه اینترنتی و CMS وردپرس)

سرفصل ­های آموزش احراز هویت کاربران در لاراول با Nuxt.js

  1. معرفی Nuxt.js
  2. نصب لاراول و js
  3. پیکربندی لاراول
  4. نصب پکیج tymon designs/jwt-auth
  5. پیکربندی Tymon
  6. ایجاد قابلیت ثبت ­نام
  7. ایجاد قابلیت ورود به سایت (لاگین)
  8. نصب ماژول CROS
  9. نصب بوت استرپ 4 داخل یک پروژه Nuxt
  10. ایجاد لایوت برای برنامه
  11. تنظیم احراز هویت Nuxt
  12. ایجاد یک فرم لاگین با Vue
  13. ارسال فرم لاگین
  14. ایجاد یک auth Store
  15. ایجاد فرم ثبت­ نام
  16. ایجاد قابلیت خروج از سایت (log out)

چارچوب Nuxt.js چیست؟

Nuxt.js به عنوان یک چارچوب یا فریم ورک واحد معرفی می شود که شما می توانید با استفاده از آن یک پروژه نظام مند را در ابتدای هر برنامه کاری خود برنامه ریزی کنید.

به عبارت دیگر با این ابزار شما می توانید یک سری حداقل ها که شامل موارد زیر است، در وب اپلیکیشن خود داشته باشید. با نصب نوکس جی اس موارد زیر به صورت خودکار نصب می شوند:

  1. Vue 2
  2. Vue Router
  3. Vuex
  4. Vue Server Renderer
  5. Vue-meta

نصب لاراول و Nuxt.js

ابتدا باید دو پروژه زیر را نصب کنیم.

  • لاراول
  • js

برای نصب لاراول ترمینال را باز کرده و دستور زیر را در آن اجرا کنید :

laravel new laravel-server

برای نصب Nuxt.js ابتدا باید Starter – template را نصب کنیم. برای کسب اطلاع بیشتر درباره این پکیج به آدرس زیر مراجعه کنید.

http://githob.com/nuxt-community/starter-template

ترمینال را باز کرده و nuxt.js starter template  را با دستور زیر نصب کنید. اما قبل از آن باید @Vue/cli-init را با دستور زیر و به صورت سراسری نصب کنیم. مطابق کد زیر.

yarn global add @vue/cli-init

حال starter template را نصب می­کنیم

vue init nuxt-community/starter-template nuxt-client

نصب nuxt.js

به پروژه nuxt-clinet رفته و با دستور زیر وابستگی ­ها را نصب کنید.

cd nuxt-client

npm install

سپس با دستور زیر سرور توسعه Nuxt.js را راه ­اندازی می­کنیم.

npm run dev

مرورگر را باز کرده و به آدرس http://localhost:3000 بروید. با این­ کار صفحه­ ای مطابق زیر باز می­شود:

صفحه خوش آمد گویی Nuxt.js

پیکربندی لاراول

به فولدر پروژه لاراول رفته و آن را با ویرایشگر مورد علاقه ­تان باز کنید، من از VScode استفاده می­کنم.

cd laravel-server

code .

فایل env. را باز کرده و پیکربندی مربوط به پایگاه داده را در آن وارد کنید. سپس جداول را با دستور migrate کنید.

php artisan migrate

در این پروژه از لاراول به عنوان یک API استفاده می­کنیم، به همین خاطر نیازی به تعریف روت در داخل پروژه نداریم. چون کاربر یک درخواست مشخص را ارسال می­کند.

لاراول در پاسخ یک json را برمی­گرداند. فقط همین، کار پیچیده­ ای نیاز نیست.

همچنین به هیچکدام از کنترلرهایی که در مسیر app>>Http>>controller>>Auth قرار دارند نیازی نداریم، پس آنها را حذف کنید و سپس با دستور زیر یک کنترلر جدید ایجاد کنید.

php artisan make:controller Auth\\AuthController

دستور بالا یک فایل به نام AuthController در فولدر Auth ایجاد می­کند. ما تمام توابع مانند Register (ثبت­ نام)، لاگین و خروج از سایت (Log out) را در داخل این فایل به نام AuthController ایجاد کنیم. همچنین فایل routes>>web.php و Welcome .blude.php را حذف کنید. تمام روت­های پروژه را در فایل.

نصب پکیج tymondesigns/jwt-auth

در روت پروژه لاراول، دستور زیر را اجرا کنید. ما در این پروژه از نسخه یک این پکیج استفاده می­کنیم. با این پکیج می توان توکن ها (کلیدی که برای احراز هویت کاربران در api بکار گرفته می شود) را مدیریت کرد.

composer require tymon/jwt-auth

بعد از اتمام نصب، به فایل Composer.json رفته و نسخه پکیج را تغییر دهید.

"require": {
        "php": "^7.1.3",
        "fideloper/proxy": "^4.0",
        "laravel/framework": "5.6.*",
        "laravel/tinker": "^1.0",
        "tymon/jwt-auth": "1.0.0-rc.2"
    },

حال دستور زیر را برای برزورسانی پکیج اجرا کنید.

composer update

با اجرای دستور بالا، پکیج بروزرسانی می­شود.

پیکربندی پکیج Tymon

ابتدا به مدل User.php بروید. این مدل باید رابط (Interface) مدل Jwtsublect را پیاده کنید.

این اینترفیس دو متد دارد که باید توسط مدل user پیاده شود.

کدهای زیر را در داخل فایل user.php بنویسید.

همچنین دو متد اینترفیس jwtSubject را هم در این فایل پیاده می­کنیم.

<?php

// User.php

namespace App;

use Tymon\JWTAuth\Contracts\JWTSubject;
use Illuminate\Notifications\Notifiable;
use Illuminate\Foundation\Auth\User as Authenticatable;

class User extends Authenticatable implements JWTSubject
{
    use Notifiable;

    protected $fillable = [
        'name', 'email', 'password',
    ];

    protected $hidden = [
        'password', 'remember_token',
    ];

    public function getJWTIdentifier()
    {
        return $this->getKey();
    }

    public function getJWTCustomClaims()
    {
        return [];
    }
}

حال با دستور زیر پکیج را منتشر می­ کنیم.

php artisan vendor:publish --provider="Tymon\JWTAuth\Providers\LaravelServiceProvider"

حال jwt secret را با دستور زیر ایجاد می کنیم

php artisan jwt:secret

حال به مسیر Config>>auth.php رفته و مقدار پروپرتی guard را برابر api بگذاریم، چون می­خواهیم از لاراول به عنوان یک api استفاده کنیم.

// auth.php

'defaults' => [
   'guard' => 'api',
    'passwords' => 'users',
 ],

'guards' => [
        'web' => [
            'driver' => 'session',
            'provider' => 'users',
        ],

        'api' => [
            'driver' => 'jwt',
            'provider' => 'users',
        ],
    ],همان­طور که در کدهای بالا می­بینید ما مقدار پیش­فرض پروپرتی guard را برابر api گذاشتیم و api هم از درایو jwt به جای token استفاده می­کند. فایل را ذخیره کنید.

ساخت قابلیت ثبت ­نام برای احراز هویت کاربران

در مرحله قبل فایل Authcontroller.php را ایجاد کردیم. در مرحله بعد روت زیر را در فایل routes>>Api.php تولید کرده و کدهای قبلی این فایل را هم حذف کنید.

توجه:‌ در صورتیکه با مباحث احزار هویت در لاراول آشنا نیستید لینک زیر را مطالعه بفرمایید:

راه اندازی سیستم احراز هویت کاربران در لاراول
<?php

// api.php

Route::post('register', 'Auth\AuthController@register')->name('register');

حال کدهای زیر را در کنترلر AuthController.php به منظور ثبت ­نام کاربران اضافه کنید.

<?php

// AuthController.php

namespace App\Http\Controllers\Auth;

use App\User;
use Illuminate\Http\Request;
use App\Http\Controllers\Controller;

class AuthController extends Controller
{
    public function register(Request $request)
    {
        $this->validate($request, [
            'name' => 'required',
            'email' => 'required|unique:users,email|email',
            'password' => 'required'
        ]);

        $user = User::create([
            'name' => $request->name,
            'email' => $request->email,
            'password' => bcrypt($request->password)
        ]);
  
        return $user;
    }
}

در کدهای بالا پس از این­که درخواست توسط سرور اعتبارسنجی شد، یک کاربر در پایگاه داده ایجاد می­شود و در انتها مشخصات آن کاربر را به خروجی بر می ­گردانیم.

حال باید از API Resource برای برگشت یک داده json به فرمت استاندارد بهره ببریم. برای این کار دستور زیر را برای ایجاد یک resource با نام User Resource اجرا می­کنیم.

php artisan make:resource UserResource

دستور بالا یک فولدر به نام Resource در مسیر app>>Http ایجاد می­کند و در داخل این فولدر یک فایل به نام UserResources.php قرار می­گیرد.

ما باید متد toArray( ) که در فایل UserResourcers.php قرار گرفته را ویرایش کنیم. همچنین باید یک آرایه شامل ویژگی هایی که در سمت کلاینت نشان دهیم را بر­گردانیم.

برای این کار مطابق زیر عمل می­کنیم:

<?php

// UserResource.php

namespace App\Http\Resources;

use Illuminate\Http\Resources\Json\JsonResource;

class UserResource extends JsonResource
{
    /**
     * Transform the resource into an array.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return array
     */
    public function toArray($request)
    {
        return [
            'id' => $this->id,
            'name' => $this->name,
            'email' => $this->email
        ];
    }
}

حال فایل UserResource.php را داخل فایل AuthController.php وارد (import) می کنیم.

<?php

// AuthController.php

namespace App\Http\Controllers\Auth;

use App\User;
use Illuminate\Http\Request;
use App\Http\Controllers\Controller;
use App\Http\Resources\UserResource;

class AuthController extends Controller
{
    public function register(Request $request)
    {
        $this->validate($request, [
            'name' => 'required',
            'email' => 'required|unique:users,email|email',
            'password' => 'required'
        ]);

        $user = User::create([
            'name' => $request->name,
            'email' => $request->email,
            'password' => bcrypt($request->password)
        ]);

        return new UserResource($user);
    }
}

حال بعد از ثبت­ نام یک کاربر، در پاسخ فرمت json زیر ارسال می­شود.

می­توانید درخواست را در برنامه Postman قسمت کنید.

ثبت نام کاربر در لاراول و تست کردن آن در Postman

همان­طور که می­بینید، کاربر در پایگاه داده ساخته شده است. در مرحله بعد باید کاربری که ثبت ­نام انجام داده را وارد برنامه ­مان کنیم، سپس یک توکن Jwt ایجاد کرده و آن را به کلاینت ارسال می­کنیم.

// RegisterController.php

public function register(Request $request)
{
        $this->validate($request, [
            'name' => 'required',
            'email' => 'required|unique:users,email|email',
            'password' => 'required'
        ]);

        $user = User::create([
            'name' => $request->name,
            'email' => $request->email,
            'password' => bcrypt($request->password)
        ]);

        if(!$token = auth()->attempt($request->only(['email', 'password'])))
        {
            return abort(401);
        }

        return (new UserResource($user))
            ->additional([
               'meta' => [
                 'token' => $token
             ]
        ]);
}

در اینجا یک بار دیگر کاربر جدیدی که ایجاد شده را احراز هویت می­ کنیم. اگر هویت کاربر تأیید شد یک توکن Jwt تولید و آن را به کلاینت ارسال می­کنیم. این کار را می­توانید در برنامه Postman و با ارسال یک درخواست دیگر به سرور، تست کنید.

تست ثبت نام کاربر در لاراول با برنامه postman

ایجاد قابلیت ورود به سایت

در مرحله قبل کدهای مربوط به ثبت­ نام کاربر را تکمیل کردیم. حال به مسیر routes>>api.php رفته و روت زیر را به آن اضافه کنید.

<?php

// api.php

Route::post('register', 'Auth\AuthController@register')->name('register');
Route::post('login', 'Auth\AuthController@login')->name('login');

یک متد login( ) داخل کنترلر Authcontroller ایجاد کرده و کدهای زیر را به منظور ورود کاربر به سایت و تولید توکن، در داخل کنترلر بنویسید.

// AuthController.php

public function login(Request $request)
{
        $this->validate($request, [
            'email' => 'required',
            'password' => 'required'
        ]);

        if(!$token = auth()->attempt($request->only(['email', 'password'])))
        {
            return response()->json([
                'errors' => [
                    'email' => ['There is something wrong! We could not verify details']
            ]], 422);
        }

        return (new UserResource($request->user()))
                ->additional([
                    'meta' => [
                        'token' => $token
                    ]
                ]);
}

در کدهای بالا اگر درخواست کاربر معتبر بود، توکن را به کلاینت ارسال می­کنیم. همچنین نیاز به تعریف یک endpoint (آدرس) api مان داریم.

این آدرس api برای بازیابی کاربر لاگین کرده، استفاده می­کنیم.

// api.php

Route::get('/user', 'Auth\AuthController@user');

متد user( ) را داخل فایل Auth controller.php تعریف کنید.

// AuthController.php

public function user(Request $request)
{
     return new UserResource($request->user());
}

نصب ماژول CORS

وقتی درخواستی را از سمت کلاینت ارسال کردیم، به یک خطا تحت عنوان cross-site request origin برخورد می­کنیم.

این خطا به این دلیل اتفاق می­افتد که ما برنامه Nuxt.js را روی پورت 3000 اجرا می­کنیم و سرور لاراول روی یک پورت دیگر اجرا می­شود.

برای حل این مشکل باید ماژول laravel-cors را نصب کنیم.

ترمینال را باز کرده و دستور زیر را برای نصب ماژول CORS در پروژه لاراول اجرا کنید.

composer require barryvdh/laravel-cors

داخل فایل CORS middlewere, app>>Http>>kernel.php را به پروپرتی api اضافه می­کنیم.

// Kernel.php

'api' => [
    'throttle:60,1',
     'bindings',
     \Barryvdh\Cors\HandleCors::class,
],

سپس پکیج CORS را با دستور زیر منتشر کنید.

php artisan vendor:publish --provider="Barryvdh\Cors\ServiceProvider"

حال می­توانیم یک درخواست را از nuxt-client به سرور لاراول بدون هیچ خطایی ارسال کنیم.

نصب بوت استرپ 4 در یک پروژه Nuxt

ترمینال را باز کرده و دستور زیر را برای نصب بوت استرپ 4، اجرا کنید.

yarn add bootstrap

# or

npm install bootstrap --save

در فولدر روت پروژه nuxt-client یک فایل به نام nuxt.config.js وجود دارد، این فایل را باز کرده و کدهای زیر را به آن اضافه کنید.

// nuxt.config.js

css: ['./node_modules/bootstrap/dist/css/bootstrap.css'],
plugins: ['~plugins/bootstrap.js']

همچنین جی­ کوئری را هم باید نصب کنید. برای این کار کدهای زیر را به آن اضافه کنید.

// nuxt.config.js

const webpack = require('webpack');

build: {
    vendor: ['jquery', 'bootstrap'],
    plugins: [
      new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery',
        'window.jQuery': 'jquery'
      })
    ],
    extend (config, { isDev, isClient }) {
      if (isDev && isClient) {
        config.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/
        })
      }
    }
  },

در نهایت فایل nuxt.config.js باید مانند زیر باشد.

// nuxt.config.js

const webpack = require('webpack')

module.exports = {
  head: {
    title: 'nuxt-client',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: 'Nuxt.js project' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },

  loading: { color: '#3B8070' },

  build: {
    vendor: ['jquery', 'bootstrap'],
    plugins: [
      new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery',
        'window.jQuery': 'jquery'
      })
    ],
    extend (config, { isDev, isClient }) {
      if (isDev && isClient) {
        config.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/
        })
      }
    }
  },
  css: ['./node_modules/bootstrap/dist/css/bootstrap.css'],
  plugins: ['~plugins/bootstrap.js']
}

حالا داخل فولدر plugin باید یک فایل با نام bootstrap.js ایجاد کنیم و کدهای زیر را داخل آن قرار دهیم.

// bootstrap.js

if (process.BROWSER_BUILD) {
    require('bootstrap')
}

فایل را ذخیره کرده و فایل pages>>index.Vue را باز کنید و کدهای آن را مطابق زیر ویرایش کنید. کدهای قبلی این فایل را حذف کنید.

// index.vue

<template>
  <div class="container">
    Page
  </div>
</template>

<script>

export default {
  
}
</script>

حال مرورگرتان را نگاه کنید. همان­طور که مبی­بینید بوت استرپ 4 اعمال شده است.

ایجاد قالب داخل پروژه Nuxt

حال داخل فورد layout یک فولدر دیگر به نام Partials ایجاد کنید و داخل آن یک کامپوننت Vue با نام Navbar.js ایجاد کنید. کدهای زیر را داخل فایل Navbar.js بنویسید.

// Navbar.js

<template>
    <nav class="navbar navbar-expand-sm bg-light">
        <div class="container">
            <a class="navbar-brand" href="">
                Nuxt Laravel Auth
            </a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <!-- Right Side Of Navbar -->
                <ul class="navbar-nav ml-auto">
                    <!-- Authentication Links -->
                        <li class="nav-item">
                            <a class="nav-link" href="">Login</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="">Register</a>
                        </li>
                        <li class="nav-item dropdown">
                            <a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>
                                Krunal <span class="caret"></span>
                            </a>

                            <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
                                <a class="dropdown-item" href="">
                                    Logout
                                </a>  
                            </div>
                        </li>
                </ul>
            </div>
        </div>
    </nav>
</template>
<script>
export default {
    
}
</script>

این کامپوننت را داخل فایل layouts>>default.Vue وارد (import) کنید.

// default.vue

<template>
  <div>
    <Navbar />
    <nuxt/>
  </div>
</template>
<script>
import Navbar from './partials/Navbar';
export default {
  components: {
    Navbar
  }
}
</script>

فایل را ذخیره کرده و به مرورگر برگردید. همان­طور که می­بینید یک منو با آیتم­هایی از قبل register ، login ، logout و نام کاربری اضافه شده است. البته آیتم­های منو بعد از هربار لاگین شدن به سایت و خروج از سایت تغییر خواهد کرد.

 راه ­اندازی احراز هویت Nuxt

در این مرحله باید دو ماژول زیر را نصب کنیم.

  • @nuxt.js/axios
  • @nuxt.js/auth
yarn add @nuxtjs/axios @nuxtjs/auth

# or

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

حال باید این ماژول­ها را در فایل nuxt.config.js ثبت کنیم.

// nuxtjs.config.js

loading: { color: '#3B8070' },

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

در کدهای زیر این دو ماژول را پیکربندی می­کنیم.

// nuxt.config.js

axios: {
    baseURL: 'http://laravel-server.test/api'
  },
  auth: {
    strategies: {
      local: {
        endpoints: {
          login: { url: 'login', method: 'post', propertyName: 'meta.token' },
          user: { url: 'user', method: 'get', propertyName: 'data' },
          logout: {}
        }
      }
    }
  },

تا به اینجا توانستیم یک baseurl برای API لاراول تعریف کردیم.

در نهایت فایل Nuxt.config.js باید مطابق زیر باشد.

// nuxt.config.js

const webpack = require('webpack')

module.exports = {
  head: {
    title: 'nuxt-client',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: 'Nuxt.js project' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },

  loading: { color: '#3B8070' },

  modules: ['@nuxtjs/auth', '@nuxtjs/axios'],
  
  axios: {
    baseURL: 'http://laravel-server.test/api'
  },
  auth: {
    strategies: {
      local: {
        endpoints: {
          login: { url: 'login', method: 'post', propertyName: 'meta.token' },
          user: { url: 'user', method: 'get', propertyName: 'data' },
          logout: {}
        }
      }
    }
  },
  build: {
    vendor: ['jquery', 'bootstrap'],
    plugins: [
      new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery',
        'window.jQuery': 'jquery'
      })
    ],
    extend (config, { isDev, isClient }) {
      if (isDev && isClient) {
        config.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/
        })
      }
    }
  },
  css: ['./node_modules/bootstrap/dist/css/bootstrap.css'],
  plugins: ['~plugins/bootstrap.js']
}

ایجاد یک فرم ورود و عضویت با Vue.js

در فولدر pages یک فایل با نام login.Vue ایجاد کنید و کدهای زیر را در آن قرار دهید.

// login.vue

<template>
    <div class="container top">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">Login</div>
                    <div class="card-body">
                        <form action="#">
                            <div class="form-group row">
                                <label for="email" class="col-sm-4 col-form-label text-md-right">Email</label>

                                <div class="col-md-6">
                                    <input type="email" class="form-control" required autofocus>
                                        <span class="invalid-feedback" role="alert">
                                            <strong></strong>
                                        </span>
                                </div>
                            </div>

                            <div class="form-group row">
                                <label for="password" class="col-md-4 col-form-label text-md-right">Password</label>

                                <div class="col-md-6">
                                    <input type="password" class="form-control" required>
                                        <span class="invalid-feedback" role="alert">
                                            <strong></strong>
                                        </span>
                                </div>
                            </div>

                            <div class="form-group row mb-0">
                                <div class="col-md-8 offset-md-4">
                                    <button type="submit" class="btn btn-primary">
                                        Login
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    
}
</script>

<style>
.top {
    margin-top: 80px;
}
</style>

حال به فایل layouts>>patials>>NaVbar.Vue رفته و یک روت برای صفحه لاگین به آن اضافه کنید. مطابق زیر:

// Navbar.js

<li class="nav-item">
   <nuxt-link :to="{ name: 'login' }" class="nav-link">
      Login
   </nuxt-link>
</li>

برای تست کد بالا، مرورگر را باز کرده و به آدرس http://localhost:3000/login بروید.

ارسال (submit) فرم لاگین

حال باید داده­ هایی که قرار است توسط فرم به سرور ارسال (submit) شود را تعریف کنیم که در این مثال email و password است.

// login.vue

data() {
    return {
         userForm: {
            email: '',
            password: ''
         }
     }
},

همچنین یک متد برای هنگامی که دکمه login کلیک شده، تعریف می­کنیم.

// login.vue

methods: {
   async addUser() {
       await this.$auth.login({
            data: this.userForm
       });
       this.$router.push({
            path: '/'
        });
    }
}

در نهایت، فایل login.Vue را به همراه قالب Html مربوطه، باید مطابق زیر باشد:

// login.vue

<template>
    <div class="container top">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">Login</div>
                    <div class="card-body">
                        <form @submit.prevent="addUser">
                            <div class="form-group row">
                                <label for="email" class="col-sm-4 col-form-label text-md-right">Email</label>
                                <div class="col-md-6">
                                    <input type="email" v-model="userForm.email" class="form-control" required autofocus>
                                        <span class="invalid-feedback" role="alert">
                                            <strong></strong>
                                        </span>
                                </div>
                            </div>

                            <div class="form-group row">
                                <label for="password" class="col-md-4 col-form-label text-md-right">Password</label>

                                <div class="col-md-6">
                                    <input type="password" v-model="userForm.password" class="form-control" required>
                                        <span class="invalid-feedback" role="alert">
                                            <strong></strong>
                                        </span>
                                </div>
                            </div>

                            <div class="form-group row mb-0">
                                <div class="col-md-8 offset-md-4">
                                    <button type="submit" class="btn btn-primary">
                                        Login
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            userForm: {
                email: '',
                password: ''
            }
        }
    },
    methods: {
        async addUser() {
            await this.$auth.login({
                data: this.userForm
            });
            this.$router.push({
                path: '/'
            });
        }
    }
}
</script>

<style>
.top {
    margin-top: 80px;
}
</style>

به این ترتیب اگر email و password وارد شده صحیح بود برنامه یک آبجکت user به همراه توکن مربوط به آن را برمی­گرداند و کاربر را به مسیر ریشه (root) برنامه هدایت می­کند حال در این قسمت باید بسته به این که کاربر login کرده یا logout آیتم ­های منو را تغییر دهیم.

ایجاد فایل auth.js جهت احزار هویت کاربران

یک فایل با نام auth.js در فولدر store ایجاد کنید و کدهای زیر را در آن قرار دهید.

دوستان عزیز چنانچه می خواهید فریم ورک ویو جی اس را به صورت مقدماتی تا پیشرفته پروژه محور یاد بگیرید روی لینک زیر کلیک کنید:

آموزش ویدیویی و پروژه محور ویو جی اس (Vuejs)
// auth.js

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

ما در این مثال از ماژول nuxtjs/auth@ با دو وضعیت (state) زیر استفاده می­کنیم.

  • Logged In
  • User

بنابراین اگر کاربر با موفقیت لاگین کرده بود، مقدار logged In را برابر true می­گذاریم و در غیر اینصورت false. حال می­خواهیم این دو state را به صورت سراسری در برنامه استفاده کنیم.

به همین دلیل یک پلاگین برای دسترسی به این دو state ایجاد می­کنیم. در فولدر plugin یک فولدر دیگر به نام mixins ایجاد کرده و داخل آن یک فایل با نام user.js ایجاد کنید و کدهای زیر را داخل فایل user.js قرار دهید.

// user.js

import Vue from 'vue'
import Vue from 'vue'
import { mapGetters } from 'vuex'

const User = {
    install (Vue, Options) {
        Vue.mixin({
            computed: {
                ...mapGetters({
                    user: 'auth/user',
                    loggedIn: 'auth/loggedIn'
                })
            }
        })
    }
}

Vue.use(User);

حال این پلاگین را در فایل nuxt.config.js ثبت کنید.

// nuxt.config.js

plugins: ['~plugins/bootstrap.js', '~plugins/mixins/user.js']

سپس کدهای زیر را در فایل Navbar.Vue جایگزین کدهای مقابل کنید.

// Navbar.vue

<template>
    <nav class="navbar navbar-expand-sm bg-light">
        <div class="container">
            <a class="navbar-brand" href="">
                Nuxt Laravel Auth
            </a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav ml-auto">
                    <template v-if="!loggedIn">
                        <li class="nav-item">
                            <nuxt-link :to="{ name: 'login' }" class="nav-link">
                                Login
                            </nuxt-link>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="">Register</a>
                        </li>
                    </template>
                    <template v-if="loggedIn">
                        <li class="nav-item">
                            <a class="nav-link" @click.prevent="logout" href="#">
                                    Logout
                            </a>  
                        </li>
                    </template>
                </ul>
            </div>
        </div>
    </nav>
</template>
<script>
export default {
    
}
</script>

ایجاد فرم ثبت­ نام برای احراز هویت کاربران در لاراول و Nuxt.js

حال در فولدر pages یک فایل با نام register.vue ایجاد کنید و کدهای زیر را به آن اضافه کنید.

// register.vue

<template>
    <div class="container top">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">Register</div>

                <div class="card-body">
                    <form @submit.prevent="registerUser">
                        <div class="form-group row">
                            <label for="name" class="col-md-4 col-form-label text-md-right">Name</label>

                            <div class="col-md-6">
                                <input type="text" class="form-control" v-model="userForm.name" required autofocus>
                                    <span class="invalid-feedback" role="alert">
                                        <strong></strong>
                                    </span>
                            </div>
                        </div>

                        <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 type="email" class="form-control" v-model="userForm.email" required>
                                    <span class="invalid-feedback" role="alert">
                                        <strong></strong>
                                    </span>
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="password" class="col-md-4 col-form-label text-md-right">Password</label>
                            <div class="col-md-6">
                                <input type="password" class="form-control" v-model="userForm.password" required>
                                    <span class="invalid-feedback" role="alert">
                                        <strong></strong>
                                    </span>
                            </div>
                        </div>
                        <div class="form-group row mb-0">
                            <div class="col-md-6 offset-md-4">
                                <button type="submit" class="btn btn-primary">
                                    Register
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
</template>

<script>
export default {
    data() {
        return {
            userForm: {
                name: '',
                email: '',
                password: ''
            }
        }
    },
    methods: {
        async registerUser() {
            await this.$axios.post('register', this.userForm);
            this.$auth.login({
                data: {
                    email: this.userForm.email,
                    password: this.userForm.password
                }
            })
            this.$router.push({
                path: '/'
            });
        }
    }
}
</script>

<style>
.top {
    margin-top: 80px;
}
</style>

حال کاربران به راحتی می­توانند ثبت ­نام کرده و به برنامه لاگین کنند.

ایجاد قابلیت خروج از سایت (logout)

در سرور لاراول یک روت برای حذف توکنی که به کلاینت ارسال کردیم، ایجاد می­کنیم.

// api.php

Route::post('/logout', 'Auth\AuthController@logout');

حال یک متد با نام logout() در فایل Authcontroller ایجاد می­کنیم.

// AuthController.php 

public function logout()
{
     auth()->logout();
}

سپس باید آدرس log out را در فایل nuxt.config.js ایجاد کنیم.

// nuxt.config.js

auth: {
    strategies: {
      local: {
        endpoints: {
          login: { url: 'login', method: 'post', propertyName: 'meta.token' },
          user: { url: 'user', method: 'get', propertyName: 'data' },
          logout: { url: 'logout', method: 'post' }
        }
      }
    }
  },

و برای سمت کلاینت هم باید متد logout را در فایل Navbar.vue اضافه کنیم.

// Navbar.vue

<template>
    <nav class="navbar navbar-expand-sm bg-light">
        <div class="container">
            <a class="navbar-brand" href="">
                Nuxt Laravel Auth 
            </a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav ml-auto">
                    <template v-if="!loggedIn">
                        <li class="nav-item">
                            <nuxt-link :to="{ name: 'login' }" class="nav-link">
                                Login
                            </nuxt-link>
                        </li>
                        <li class="nav-item">
                            <nuxt-link :to="{ name: 'register' }" class="nav-link">
                                Register
                            </nuxt-link>
                        </li>
                    </template>
                    <template v-if="loggedIn">
                        <li class="nav-item">
                            <a class="nav-link" @click.prevent="logout" href="#">
                                    Logout
                            </a>  
                        </li>
                    </template>
                </ul>
            </div>
        </div>
    </nav>
</template>
<script>
export default {
    methods: {
        logout() {
            this.$auth.logout();
        }
    }
}
</script>

حال کاربر می­تواند با موفقیت از سیستم خارج شود و در این حالت توکن حذف می­شود. همان­طور که در منو می­بینید آیتم­ها به login و register تغییر کردند.

همچنین باید کدهای فایل pages>>index.vue را مطابق زیر تغییر دهید تا بتوانید کاربری که هم­ اکنون لاگین کرده را به درستی نمایش دهید.

// index.vue

<template>
  <div class="container">
    <p v-if="loggedIn">
      Hello {{ user.name }}
    </p>
    <p v-if="!loggedIn">
      Please sign in
    </p>
  </div>
</template>

<script>

export default {
  
}
</script>

پیاده کردن قابلیت لاگین به سایت

حال اگر کاربر از برنامه خارج شود (logout کند)، دوباره همان صفحه را می­بینید، اما متن و آیتم ­های منو تغییر کرده ­اند.

پیاده سازی قابلیت log out در لاراول

به این ترتیب توانستیم با موفقیت پروژه احراز هویت در لاراول با Nuxt.js را به پایان برسانیم.

کدهای مربوط به بخش سرور لاراول را از اینجا و کدهای مربوط به سمت کلاینت به برنامه را از اینجا دانلود کنید.

برچسب‌ها: آموزش لاراول Laravel احراز هویت در لاراول Vue.js 2 لاراول 5.7 لاراول و Vuejs Nuxt.js
نویسنده شوید
دیدگاه‌های شما (1 دیدگاه)

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.

امین
15 آذر 1397
دوست عزیز احراز هویت با Sms به چه شکل هست؟ برای تایید ایمل بایستی چه کار کرد؟ در vue فرق خاصی دارد؟

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.

دوره‌های آموزشی مرتبط
آموزش لاراول + پروژه فروشگاه مشابه دیجی استایل و ساخت CMS
آموزش لاراول + پروژه فروشگاه مشابه دیجی استایل و ساخت CMS
580000 تومان
مقالات مرتبط
اصول سالید در لاراول
راه اندزای لاراول با داکر - صفر تا صد
دیزاین پترن ریپازیتوری در لاراول
آموزش کار با ترنزکشن (Transaction) در لاراول
ساخت فروشگاه اینترنتی با لاراول و Vue
آخرین سوالات کاربران
mdazizi000 در 3 سال قبل پرسیده:
نصب laravel collective
ما را دنبال کنید
اینستاگرام روکسو تلگرام روکسو ایمیل و خبرنامه روکسو