Vue3 & Vite 中如何使用 Tailwind CSS 之 Laravel9后台实现-前后端分离演示案例（三）

hi，我是温馨，一名PHPer

本篇文章是一个前后端分离的演示项目，因此，需要完成如下 2 个连接的操作，才能保证案例的顺利进行。

Vue3 & Vite 中如何使用 Tailwind CSS 之 Laravel9前后端分离演示案例（一）

Vue3 & Vite 中如何使用 Tailwind CSS 之 Laravel9 登录功能-前后端分离演示案例（二）

第一步：创建项目

composer create-project laravel/laravel la9vue3

第二步：配置数据库

// .env

DB_DATABASE=la9vue3
DB_USERNAME=la9vue3
DB_PASSWORD=123456

第三步：安装 passport 并进行配置

1）安装 passport 扩展包

composer require laravel/passport

2）执行迁移文件

php artisan migrate

3）安装客户端秘钥

php artisan passport:install

4）User 模型使用 Passport

<?php
// App/Models/User.php
namespace App\Models;

// use Illuminate\Contracts\Auth\MustVerifyEmail;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Foundation\Auth\User as Authenticatable;
use Illuminate\Notifications\Notifiable;
use Laravel\Passport\HasApiTokens;

class User extends Authenticatable
{
    use HasApiTokens, HasFactory, Notifiable;
    
    protected $fillable = [
        'name',
        'email',
        'password',
    ];

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

    protected $casts = [
        'email_verified_at' => 'datetime',
    ];
}

5）AuthServiceProvider 中注册 passport

<?php
// app/Providers/AuthServiceProvider.php
    
namespace App\Providers;

// use Illuminate\Support\Facades\Gate;
use Illuminate\Foundation\Support\Providers\AuthServiceProvider as ServiceProvider;

use Laravel\Passport\Passport;

class AuthServiceProvider extends ServiceProvider
{
    protected $policies = [
        // 'App\Models\Model' => 'App\Policies\ModelPolicy',
    ];


    public function boot()
    {
        $this->registerPolicies();

        // 注意，此处发生了变化
        Passport::enableImplicitGrant();
    }
}

一定要参考官方英文文档，有什么修改都会在这里发布。比如AuthServiceProvider.php 中注册passport 的方式就已经发生了变化。

6）添加 api 驱动

// config/auth.php

'guards' => [
    'web' => [
        'driver' => 'session',
        'provider' => 'users',
    ],
    // 添加 api
    'api' => [
        'driver' => 'passport',
        'provider' => 'users',
    ],
],

第四步：创建控制器并添加方法

1）创建控制器

php artisan make:controller Test/AuthController 

2）添加方法

<?php
// app/Http/Controllers/Test/AuthController.php
    
namespace App\Http\Controllers\Test;

use App\Http\Controllers\Controller;
use App\Models\User;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Hash;
use Illuminate\Validation\Rules;
use Symfony\Component\HttpFoundation\Response;

class AuthController extends Controller
{
    public function login(Request $request)
    {
        if (auth()->attempt($request->all())) {
            return response([
                'user' => auth()->user(),
                'access_token' => auth()->user()->createToken('authToken')->accessToken
            ], Response::HTTP_OK);
        }

        return response([
            'message' => 'This User does not exist'
        ], Response::HTTP_UNAUTHORIZED);
    }

    public function register(Request $request)
    {
        $request->validate([
            'name' => 'required|string|max:255',
            'email' => 'required|string|email|max:255|unique:users',
            'password' => ['required', 'confirmed', Rules\Password::defaults()],
        ]);

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

        return response($user, Response::HTTP_CREATED);
    }
}

3）创建路由

// routes/api.php

Route::post('login', [\App\Http\Controllers\Test\AuthController::class, 'login']);
Route::post('register', [\App\Http\Controllers\Test\AuthController::class, 'register']);

到这里，前后端分离的登录/注册功能就已经完成了。