مارک پلاس

تکنولوژی نوین اینترنتی

Sanctum احراز هویت SPA

دسته‌بندی‌ها

Sanctum احراز هویت SPA
Sanctum احراز هویت SPA

عالی! حالا بریم سراغ یکی از محبوب‌ترین روش‌های احراز هویت API برای اپلیکیشن‌های SPA (مثل Vue.js، React یا حتی موبایل):

Laravel Sanctum برای احراز هویت در SPA

Sanctum بهت اجازه می‌ده به‌سادگی توکن‌های احراز هویت برای کاربران بسازی، مخصوصاً برای اپلیکیشن‌های تک‌صفحه‌ای (SPA) با کوکی‌های امن.


📦 ۱. نصب Laravel Sanctum

bash
composer require laravel/sanctum

سپس:

bash
php artisan vendor:publish --provider="Laravel\Sanctum\SanctumServiceProvider" php artisan migrate

این دستور جدول personal_access_tokens رو ایجاد می‌کنه.


🛡 ۲. تنظیم Middleware

در app/Http/Kernel.php، middleware زیر باید در api قرار بگیره:

php
'api' => [ \Laravel\Sanctum\Http\Middleware\EnsureFrontendRequestsAreStateful::class, // ⬅ بسیار مهم برای SPA 'throttle:api', \Illuminate\Routing\Middleware\SubstituteBindings::class, ],

🔐 ۳. استفاده در مدل User

در User.php:

php
use Laravel\Sanctum\HasApiTokens; class User extends Authenticatable { use HasApiTokens, HasFactory, Notifiable; // ... }

🚀 ۴. ایجاد Route های Login / Logout / Me

در routes/api.php:

php
use Illuminate\Support\Facades\Route; use Illuminate\Http\Request; use App\Models\User; use Illuminate\Support\Facades\Hash; Route::middleware('auth:sanctum')->get('/user', function (Request $request) { return $request->user(); // برای گرفتن اطلاعات کاربر لاگین‌شده }); Route::post('/login', function (Request $request) { $user = User::where('email', $request->email)->first(); if (! $user || ! Hash::check($request->password, $user->password)) { return response()->json(['message' => 'Invalid credentials'], 401); } return response()->json(['message' => 'Logged in successfully']); }); Route::post('/logout', function (Request $request) { auth()->user()->tokens()->delete(); // همه توکن‌ها حذف می‌شن return response()->json(['message' => 'Logged out']); });

🍪 ۵. ارسال کوکی با Axios (در SPA)

در سمت کلاینت (مثلاً Vue یا React):

⚙ پیکربندی Axios:

js
axios.defaults.withCredentials = true;

🔐 login:

js
await axios.get('http://localhost:8000/sanctum/csrf-cookie'); // گام مهم برای دریافت CSRF await axios.post('http://localhost:8000/api/login', { email: 'ali@example.com', password: '123456' });

🔒 درخواست امن:

js
const res = await axios.get('http://localhost:8000/api/user'); console.log(res.data); // اطلاعات کاربر لاگین شده

✅ ویژگی‌های کلیدی Sanctum برای SPA

ویژگیتوضیح
مبتنی بر کوکی امن (HttpOnly)امن‌تر از LocalStorage
بدون JWTساده‌تر و سریع‌تر
سازگار با Vue/Reactمخصوص SPA طراحی شده
پشتیبانی از CSRFبا استفاده از /sanctum/csrf-cookie
استفاده با auth:sanctumبه جای auth:api در Middleware

🧪 پیشنهاد تست

  • از Postman هم می‌تونی استفاده کنی، ولی برای کوکی باید CSRF رو بگیری (با GET /sanctum/csrf-cookie) و session ذخیره شه.

  • برای تست بهتر، از مرورگر و DevTools استفاده کن (تب Cookies → XSRF-TOKEN و laravel_session باید باشه).


اگه خواستی یه پروژه نمونه Vue.js + Sanctum برات بسازم، یا API کامل لاگین/رجیستر با کشیدن و انتقال توکن و کوکی‌ها، فقط بگو. آماده‌م ✌️

محتوای مرتبط

پست‌های مرتبط