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

作者: 温新

分类: 【Laravel】

阅读: 1982

时间: 2022-09-12 03:38:57

hi,我是温馨,一名PHPer

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

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

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

第一步:创建项目

<span style="color: rgb(255, 192, 0);">composer create-project laravel/laravel la9vue3</span><br></br>

第二步:配置数据库

<span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(98, 151, 85) !important">// .env</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">DB_DATABASE</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">la9vue3</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">DB_USERNAME</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">la9vue3</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">DB_PASSWORD</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">123456</span></span>

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

1)安装 passport 扩展包

<span style="color: rgb(255, 192, 0);">composer require laravel/passport</span><br></br>

2)执行迁移文件

<span style="color: rgb(255, 192, 0);">php artisan migrate</span><br></br>

3)安装客户端秘钥

<span style="color: rgb(255, 192, 0);">php artisan passport:install</span><br></br>

4)User 模型使用 Passport

<span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><?</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">php</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(98, 151, 85) !important">// App/Models/User.php</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">namespace</span> <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">App\Models</span>;</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(98, 151, 85) !important">// use Illuminate\Contracts\Auth\MustVerifyEmail;</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">use</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">Illuminate\Database\Eloquent\Factories\HasFactory</span>;</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">use</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">Illuminate\Foundation\Auth\User</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">as</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">Authenticatable</span>;</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">use</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">Illuminate\Notifications\Notifiable</span>;</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">use</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">Laravel\Passport\HasApiTokens</span>;</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">class</span> <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">User</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">extends</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">Authenticatable</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">{</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">use</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">HasApiTokens</span>, <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">HasFactory</span>, <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">Notifiable</span>;</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    </span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">protected</span> <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">$fillable</span> <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span> [</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'name'</span>,</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'email'</span>,</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'password'</span>,</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    ];</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">protected</span> <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">$hidden</span> <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span> [</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'password'</span>,</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'remember_token'</span>,</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    ];</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">protected</span> <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">$casts</span> <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span> [</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'email_verified_at'</span> <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=></span> <span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'datetime'</span>,</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    ];</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">}</span>

5)AuthServiceProvider 中注册 passport

<span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><?</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">php</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(98, 151, 85) !important">// app/Providers/AuthServiceProvider.php</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    </span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">namespace</span> <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">App\Providers</span>;</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(98, 151, 85) !important">// use Illuminate\Support\Facades\Gate;</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">use</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">Illuminate\Foundation\Support\Providers\AuthServiceProvider</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">as</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">ServiceProvider</span>;</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">use</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">Laravel\Passport\Passport</span>;</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">class</span> <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">AuthServiceProvider</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">extends</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">ServiceProvider</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">{</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">protected</span> <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">$policies</span> <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span> [</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(98, 151, 85) !important">// 'App\Models\Model' => 'App\Policies\ModelPolicy',</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    ];</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">public</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">function</span> <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">boot</span>()</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    {</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">$this</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">-></span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">registerPolicies</span>();</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(98, 151, 85) !important">// 注意,此处发生了变化</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">Passport</span>::<span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">enableImplicitGrant</span>();</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    }</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">}</span>

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

6)添加 api 驱动

<span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(98, 151, 85) !important">// config/auth.php</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'guards'</span> <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=></span> [</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'web'</span> <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=></span> [</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'driver'</span> <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=></span> <span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'session'</span>,</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'provider'</span> <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=></span> <span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'users'</span>,</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    ],</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(98, 151, 85) !important">// 添加 api</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'api'</span> <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=></span> [</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'driver'</span> <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=></span> <span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'passport'</span>,</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'provider'</span> <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=></span> <span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'users'</span>,</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    ],</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">],</span>

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

1)创建控制器

<span style="color: rgb(255, 192, 0);">php artisan make:controller Test/AuthController</span> <br></br>

2)添加方法

<span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><?</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">php</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(98, 151, 85) !important">// app/Http/Controllers/Test/AuthController.php</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    </span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">namespace</span> <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">App\Http\Controllers\Test</span>;</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">use</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">App\Http\Controllers\Controller</span>;</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">use</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">App\Models\User</span>;</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">use</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">Illuminate\Http\Request</span>;</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">use</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">Illuminate\Support\Facades\Hash</span>;</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">use</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">Illuminate\Validation\Rules</span>;</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">use</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">Symfony\Component\HttpFoundation\Response</span>;</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">class</span> <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">AuthController</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">extends</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">Controller</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">{</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">public</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">function</span> <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">login</span>(<span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">Request</span> <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">$request</span>)</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    {</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">if</span> (<span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">auth</span>()<span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">-></span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">attempt</span>(<span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">$request</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">-></span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">all</span>())) {</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">            <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">return</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">response</span>([</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                <span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'user'</span> <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=></span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">auth</span>()<span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">-></span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">user</span>(),</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                <span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'access_token'</span> <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=></span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">auth</span>()<span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">-></span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">user</span>()<span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">-></span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">createToken</span>(<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'authToken'</span>)<span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">-></span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">accessToken</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">            ], <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">Response</span>::<span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">HTTP_OK</span>);</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">        }</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">return</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">response</span>([</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">            <span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'message'</span> <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=></span> <span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'This User does not exist'</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">        ], <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">Response</span>::<span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">HTTP_UNAUTHORIZED</span>);</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    }</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">public</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">function</span> <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">register</span>(<span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">Request</span> <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">$request</span>)</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    {</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">$request</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">-></span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">validate</span>([</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">            <span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'name'</span> <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=></span> <span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'required|string|max:255'</span>,</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">            <span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'email'</span> <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=></span> <span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'required|string|email|max:255|unique:users'</span>,</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">            <span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'password'</span> <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=></span> [<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'required'</span>, <span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'confirmed'</span>, <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">Rules\Password</span>::<span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">defaults</span>()],</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">        ]);</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">$user</span> <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">User</span>::<span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">create</span>([</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">            <span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'name'</span>  <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=></span>  <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">$request</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">-></span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">name</span>,</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">            <span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'email'</span> <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=></span>  <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">$request</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">-></span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">email</span>,</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">            <span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'password'</span>  <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=></span>  <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">Hash</span>::<span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">make</span>(<span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">$request</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">-></span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">password</span>)</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">        ]);</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">return</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">response</span>(<span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">$user</span>, <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">Response</span>::<span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">HTTP_CREATED</span>);</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    }</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">}</span>

3)创建路由

<span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(98, 151, 85) !important">// routes/api.php</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">Route</span>::<span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">post</span>(<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'login'</span>, [<span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">\App\Http\Controllers\Test\AuthController</span>::<span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">class</span>, <span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'login'</span>]);</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">Route</span>::<span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">post</span>(<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'register'</span>, [<span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">\App\Http\Controllers\Test\AuthController</span>::<span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">class</span>, <span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'register'</span>]);</span>

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

请登录后再评论