آموزش نصب Laravel UI (احراز هویت قدیمی لاراول)

زمانی که لاراول ۸ معرفی شد، یه سری تغییرات بزرگ روی اون اعمال شد که برنامه نویس هارو شوک زده کرد. یکی از اون تغییرات اساسی، حذف سیستم احراز هویت از هسته لاراول بود. لاراول کیت های شروع کننده (Starter Kits) رو به داکیومنت خودش اضافه کرد و داخلش درباره سیستم های جدید احراز هویت صحبت کرد.

سیستم های جدید احراز هویت خیلی خوب، کارآمد و پیشرفته تر نسبت به اون چیزی که قبلا داخل لاراول وجود داشت، هستن. قطعا نیازه که یه برنامه نویس خودشو با تکنولوژی های جدید وفق بده. اما بعضی از برنامه نویس ها محتاط عمل میکنن. یا به هر دلیلی میخوان از همون سیستم قدیمی احراز هویت لاراول استفاده کنن. مشکلی نیست! چون لاراول سیستم قدیمی احراز هویت خودش رو بصورت یه پکیج مجزا به اسم Laravel UI ارائه کرده که خیلی راحت می‌تونین ازش استفاده کنین.

توی این آموزش یه لاراول جدید نصب می‌کنیم. بعد پکیج Laravel UI رو نصب می‌کنیم. سیستم احراز هویت رو پیاده سازی می‌کنیم. بعدش NPM رو نصب و راه اندازی می‌کنیم و با بعضی از امکانات این پکیج آشنا میشیم.

نصب لاراول جدید با کامپوزر

اول از همه ترمینال رو باز می‌کنیم و با استفاده از کامپوزر یه لاراول جدید نصب می‌کنیم، اگه از قبل نصب کردین که از این مرحله بگذرین :

composer create-project laravel/laravel laravel8

نصب پکیج Laravel UI

برای نصب پکیج رسمی از طریق کامپوزر اقدام می‌کنیم. پس داخل فولدر پروژه و از طریق ترمینال دستور زیر رو وارد کنین:

composer require laravel/ui

بعد از این که پکیج براتون نصب شد، دستور ui به Artisan اضافه میشه. با استفاده از اون و انتخاب نوع پکیج فرانت‌اند (frontend) می‌تونین اجراش کنین تا پکیج روی پروژه اعمال بشه. داخل این پکیج از چند مدل تکنولوژی فرانت‌اند استفاده شده. با توجه به میل خودتون می‌تونین انتخاب کنین که کدوم رو می‌خوایین پیاده سازی کنین. می‌تونین از vue یا react استفاده کنین ولی اونی که قبلا داخل لاراول وجود داشت بوت استرپ (bootstrap) بود. این پکیج یه فلگ --auth هم داره که سیستم احراز هویت و صفحات ورود، ثبت نام و… با این فلگ نصب میشه که توی این آموزش باید با این فلگ نصب کنین:

// Generate basic scaffolding...
php artisan ui bootstrap
php artisan ui vue
php artisan ui react

// Generate login / registration scaffolding...
php artisan ui bootstrap --auth
php artisan ui vue --auth
php artisan ui react --auth

نصب و راه اندازی NPM

بعد از نصب Node.js و NPM روی سیستم خودتون، باید یک بار از دستور زیر داخل پروژه استفاده کنین تا با توجه به فایل package.json بسته های مورد نیاز پروژه نصب بشه:

npm install

بعد از اتمام نصب، شما باید npm رو اجرا کنین تا با استفاده از لاراول میکس (Laravel Mix) فایل های assets رو براتون کامپایل کنه:

npm run dev

خب حالا وقتشه که تست کنیم. اول دستور زیر رو وارد کنین تا لاراول روی پورت 8000 لوکال هاست باز بشه :

php artisan serve

بعد از اجرا شدن سرور، آدرس های زیر رو داخل مرورگر باز کنین:

http://localhost:8000/login
http://localhost:8000/register

اگه مراحل رو درست رفته باشین صفحه ورود و ثبت نام رو می‌بینین. یعنی سیستم احراز هویت کامل نصب شده. حالا یه چند تا از کارایی که می‌تونین با این پکیج بکنین رو بهتون میگم.

غیرفعال کردن سیستم ثبت نام

شاید لازم ندونین کسی برای این پروژه ثبت نام کنه، خیلی راحت می‌تونین داخل مسیر routes/web.php کد زیر رو جایگزین روت Auth کنین تا ثبت نام غیرفعال بشه.

Auth::routes(['register' => false]);

محدود کردن مسیر ها از طریق میدلور

شما از دو طریق میتونین مسیری رو محدود به ورود کاربر کنین. برای مثال میخوایین تا وقتی که کاربر لاگین نکرده نتونه داشبورد رو ببینه.

روش اول اینه که از طریق مسیر routes/web.php روی روت داشبوردتون از میدلور (middleware) احراز هویت auth استفاده کنین:

Route::get('dashboard', 'App\Http\Controllers\UserController@dashboard')->middleware('auth');

روش دوم اینه که داخل فانکشن کانستراکتور (constructor) کلاس مربوطه از میدلور auth استفاده کنین:

<?php

class UserController extends Controller
{
	public function __construct()
	{
	    $this->middleware('auth');
	}

	public function dashboard(){
		//
	}

	...

}

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

if(auth()->check()){
  // If the user only authenticated
}

و اگه دیتای کاربری که لاگین کرده رو میخواین، باید مثل زیر عمل کنین:

$user = auth()->user();

پیکربندی سیستم احراز هویت

یه سری امکانات جانبی هم هستش که میتونین انجام بدین. مثلا برای اینکه مسیر پیشفرض ریدایرکت بعد از لاگین رو تغییر بدین، باید داخل مسیر app/Providers/RouteServiceProvider.php برین و مقدار public const HOME رو به مسیر دلخواهتون تغییر بدین:

public const HOME = '/dashboard';

یا مثلا برای اینکه نام کاربری پیشفرض که ایمیل کاربر هستش رو بخوایین تغییر بدین، باید از مسیر app/Http/Controllers/Auth/LoginController.php فانکشن زیر رو اضافه کنین و فیلدی که میخواین به عنوان نام کاربری انتخاب بشه رو برگردونین:

public function username()
{
    return 'username';
}

خب تمومه! اگه سوال یا نظری داشتین خوشحال میشم داخل نظرات برام بنویسین.