13518219792
小编给大家分享一下如何使用Laravel Sanctum对Vue应用进行授权，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！
Laravel Sanctum (以前称为 Laravel Airlock), 于今年早些时候发布，是一个轻量级的扩展包，可以使得在单页面应用或者本地移动应用上构建身份验证的流程变得尽可能地简单和轻松。在此之前，你要么使用基于 sessions 的 Web 中间件 ，要么使用外部集成的依赖包，如 Tymon 的 jwt-auth， 然而现在，你可以使用 Sanctum 来完成有状态的身份验证和基于 token 身份验证。
在这个简短的测试中，我会向你展示如何让运用 Laravel Sanctum 从 0 开始构建一个项目。 我们将创建一个虚拟 API，通过 Vue 组件对用户进行身份验证，并获取与该登录用户相关联的数据。
如果您想跳过书面教程，可以观看我制作的 视频
您也可以直接到 GitHub 上查看完整源代码，该源代码位于 [代码] this repository 。
准备就绪，接下来，让我们一起盘它！
创建测试 API
我们需要做的第一件事是创建一个可以从中获取数据的 API 接口。我构思了一个超级简单的应用，用于检索展示每个用户的秘密列表。
我已经安装了一个开箱即用的 Laravel 应用程序，并且将其跟 MySQL 数据库一起配置运行在我使用 Laravel Docker setup 搭建的本地环境中。我要做的第一件事就是去为我们的 secret 创建一个模型类以及相关的迁移文件 ，这里我们可以很轻松地使用 artisan ， 通过命令行来完成这些操作。
php artisan make:model Secret --migration
接下来，让我们打开迁移文件，并且添加一些足以描述一个 secret 需要的数据列。 我认为我们需要的 (除了 Laravel 提供的默认 ID 和时间戳) 是一个用于跟用户关联的 user_id 整数字段 ，以及一个用于实实在在地保存用户 secret 信息的字段。
Schema::create('secrets', function (Blueprint $table) {
$table->id();
$table->integer('user_id');
$table->text('secret');
$table->timestamps();
});然后，接着运行数据库迁移命令生成 users 和 secrets 两个表。
php artisan migrate
我们需要对应用程序的两个模型类进行一些简单的修改，用于启用两个模型类之间的关联关系，所以接下来让我们打开这两个模型类文件，并且开始修改 ：
// User.php
public function secrets()
{
return $this->hasMany('App\Secret');
}
// Secret.php
public function user()
{
return $this->belongsTo('App\User');
}我们 API 结构的最后一部分就是实际的路由和控制器。我们将仅仅访问一条网页路径就可以展示出跟当前用户的所有 secrets 信息。所以，我在 routes/api.php 文件中添加了以下内容：
Route::get('/secrets', 'SecretController@index');可以使用 Artisan 命令轻松创建此控制器：
php artisan make:controller SecretController
打开刚刚创建的控制器，让我们创建 index 方法，先返回所有的密钥。因为 现在 我们还无法获得经过身份验证的用户：
public function index()
{
return App\Secret::all();
}我们的虚拟 API 现在已经完成，来创建一些假用户和密钥吧。
填充数据库
你可以轻松地直接进入数据库并手动填充用户，创建控制器和表单以供用户输入自己的数据，或者使用 Artisan tinker 来半自动创建用户。我将跳过这些方法，使用内置的 Laravel 工厂为我们的用户和密钥生成假数据。
Laravel 带有一个开箱即用的 UserFactory.php 类，用来生成假用户。我们将为密钥创建一个类似的工厂类。在终端中运行以下 Artisan 命令：
php artisan make:factory SecretFactory --model=Secret
打开生成的文件，我们只需用 user_id 和 secret 这两个数据填充每个模型：
$factory->define(Secret::class, function (Faker $faker) {
return [
'user_id' => 1,
'secret' => $faker->text
];
});你可能想知道为什么我们要在上面的片段中的 user_id 中使用硬编码。因为我不想基于用户数量随机生成它，而是希望对其进行更多控制。稍后，我将告诉你当我们开始生成秘密时如何覆盖它。
让我们从创建几个假用户开始。通过从站点根目录运行 php artisan tinker 命令来打开 Tinker Shell. 打开后，我们可以通过两次运行 global factory helper 来创建两个用户：
factory(App\User::class)->create(); // 与make不同，create 将我们的用户保存在数据库中
Now that we have them generated, let's create our secrets. I'm going to run the following in the tinker shell twice to create two for user_id 1:
现在我们已经生成了它们，让我们创建我们的密钥。我在 tinker 中运行以下命令两次，为 user_id 1 创建两个密钥：
factory(App\Secret::class)->create();
但是如果第二个密钥拥有不同 ID 的用户呢？覆盖工厂类中的任何值都很容易，我们要做的就是将覆盖数组传递给 create() 方法。因此，我们将运行两次以下命令，为第二个假用户创建两个密钥：
factory(App\Secret::class)->create(['user_id' => 2]);
我们的数据库中填充了足够的假数据之后，让我们继续安装和准备 Laravel Sanctum 软件包。
安装 Laravel Sanctum
安装轻而易举，可以通过在终端中运行一些命令来完成。首先，让我们使用 Composer 安装该软件包：
composer require laravel/sanctum
接下来运行以下命令发布迁移文件（并运行迁移）：
php artisan vendor:publish --provider="Laravel\Sanctum\SanctumServiceProvider" php artisan migrate
Sanctum 安装的最后一部分要求我们修改 app\Http\Kernel.php 文件以包含一个中间件，该中间件会将 Laravel 的会话 cookie 注入到我们的应用程序前端中。这最终将使我们能够以经过身份验证的用户身份传递和检索数据：
'api' => [ EnsureFrontendRequestsAreStateful::class, 'throttle:60,1' ]
现在，我们可以进入应用程序的前端了！
构建前端
从 Laravel 7 开始，前端和身份验证模板已从主程序包中剥离，可以单独安装。为了进行演示，我们将使用它和 Vue 来构建前端。
在应用程序的根目录运行以下命令将帮助我们配置环境：
composer require laravel/ui php artisan ui vue --auth npm install && npm run dev
上面的命令做了三件事：
使用 Composer 安装 Laravel UI 软件包
生成 JS/UI 文件、身份验证模板和 package.json 修改
安装前端依赖项并编译开发环境的 JS/CSS 文件
我会把 welcome.blade.php 文件里的所有内容拷贝到 app.blade.php 文件里，然后把外部 div 里的内容删掉并添加一个 id="app" 属性。这将是我们 Vue 应用程序的挂载点，如刚才生成的 app.js 文件中所述。
让我们创建 Vue 组件，该组件将保存我们的登录表单并显示一些 secret.
创建 Vue 组件
在此之前，我们可以通过命令： php artisan ui vue 来生快速成我们的前端代码，它默认会生成一个 resources/js/components/ExampleComponent.vue 组件事例。好了，现在让我们创建新的组件：SecretComponent.vue，它的代码如下:
这里有两个字段返回，其中 secrets 字段是个数组，还有一个用户存储 email 和 password 字段的 formData 对象。
下面，我们将在 template 标签内构件我们的登录表单。
