كيفية تطبيق مصادقة JWT في واجهة Laravel 11

المشكلة

تحتاج إلى مصادقة عديمة الحالة لواجهتك البرمجية تعمل عبر تطبيقات الجوال وتطبيقات الصفحة الواحدة دون كوكيز الجلسة.

الحل: مصادقة JWT

الخطوة 1: تثبيت حزمة JWT

composer require php-open-source-saver/jwt-auth
php artisan vendor:publish --provider="PHPOpenSourceSaver\JWTAuth\Providers\LaravelServiceProvider"
php artisan jwt:secret

الخطوة 2: إعداد نموذج المستخدم

<?php

use PHPOpenSourceSaver\JWTAuth\Contracts\JWTSubject;

class User extends Authenticatable implements JWTSubject
{
    public function getJWTIdentifier()
    {
        return $this->getKey();
    }

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

الخطوة 3: تحديث config/auth.php

'guards' => [
    'api' => [
        'driver' => 'jwt',
        'provider' => 'users',
    ],
],

الخطوة 4: إنشاء متحكّم المصادقة

class AuthController extends Controller
{
    public function login(Request $request)
    {
        $credentials = $request->validate([
            'email' => 'required|email',
            'password' => 'required',
        ]);

        if (!$token = auth('api')->attempt($credentials)) {
            return response()->json(['error' => 'Invalid credentials'], 401);
        }

        return $this->respondWithToken($token);
    }

    public function me()
    {
        return response()->json(auth('api')->user());
    }

    public function refresh()
    {
        return $this->respondWithToken(auth('api')->refresh());
    }

    public function logout()
    {
        auth('api')->logout();
        return response()->json(['message' => 'Logged out']);
    }

    protected function respondWithToken($token)
    {
        return response()->json([
            'access_token' => $token,
            'token_type' => 'bearer',
            'expires_in' => auth('api')->factory()->getTTL() * 60
        ]);
    }
}

الخطوة 5: حماية المسارات

Route::post('/login', [AuthController::class, 'login']);

Route::middleware('auth:api')->group(function () {
    Route::get('/me', [AuthController::class, 'me']);
    Route::post('/refresh', [AuthController::class, 'refresh']);
    Route::post('/logout', [AuthController::class, 'logout']);
});

الاستخدام في الواجهة الأمامية

// Store token after login
localStorage.setItem('token', response.data.access_token);

// Include in requests
axios.defaults.headers.common['Authorization'] =
    `Bearer ${localStorage.getItem('token')}`;