使用 Laravel Sanctum 轻松验证 Vue SPA

Laravel Sanctum (以前称为 Laravel Airlock), 于今年早些时候发布，是一个轻量级的扩展包，可以使得在单页面应用或者本地移动应用上构建身份验证的流程变得尽可能地简单和轻松。在此之前，你要么使用基于 sessions 的 Web 中间件 ，要么使用外部集成的依赖包，如 Tymon 的 jwt-auth， 然而现在，你可以使用 Sanctum 来完成有状态的身份验证和基于 token 身份验证。

在这个简短的测试中，我会向你展示如何让运用 Laravel Sanctum 从 0 开始构建一个项目。 我们将创建一个虚拟 API，通过 Vue 组件对用户进行身份验证，并获取与该登录用户相关联的数据。

准备就绪，接下来，让我们一起盘它！

创建测试 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 来半自动创建用户。我将跳过这些方法，使用内置的 Lara