您现在的位置是:自如初>LaravelLaravel

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

温新 2022-09-12 11:38:57 Laravel 614人已围观

简介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']);

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

很赞哦!(2)

文章评论

登录 注册

自如初--时间轴

QQ登录

站名:自如初

独白:向前走!向前走!

邮箱:xyhcx@foxmail.com

站点信息