使用 Laravel Sanctum 轻松验证 Vue SPA

时间 2021-02-21

标签 php 前端 vue ios laravel web 面试 sql shell 数据库栏目 PHP 繁體版

原文原文链接

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

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

准备就绪，接下来，让咱们一块儿盘它！vue

建立测试 API

咱们须要作的第一件事是建立一个能够从中获取数据的 API 接口。我构思了一个超级简单的应用，用于检索展现每一个用户的秘密列表。ios

我已经安装了一个开箱即用的 Laravel 应用程序，而且将其跟 MySQL 数据库一块儿配置运行在我使用 Laravel Docker setup 搭建的本地环境中。我要作的第一件事就是去为咱们的 secret 建立一个模型类以及相关的迁移文件，这里咱们能够很轻松地使用 artisan ，经过命令行来完成这些操做。laravel

php artisan make:model Secret --migration

接下来，让咱们打开迁移文件，而且添加一些足以描述一个 secret 须要的数据列。我认为咱们须要的 (除了 Laravel 提供的默认 ID 和时间戳) 是一个用于跟用户关联的 user_id 整数字段，以及一个用于实实在在地保存用户 secret 信息的字段。web

Schema::create('secrets', function (Blueprint $table) {
    $table->id();
    $table->integer('user_id');
    $table->text('secret');
    $table->timestamps();
});

而后，接着运行数据库迁移命令生成 users 和 secrets 两个表。面试

php artisan migrate

咱们须要对应用程序的两个模型类进行一些简单的修改，用于启用两个模型类之间的关联关系，因此接下来让咱们打开这两个模型类文件，而且开始修改：sql

// 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 文件中添加了如下内容：shell

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，它的代码以下:

<template>

</template>
<script>
export default {
    data() {
        return {
            secrets: [],
            formData: {
                email: '',
                password: ''
            }
        }
    }
}
</script>

这里有两个字段返回，其中 secrets 字段是个数组，还有一个用户存储 email 和 password 字段的 formData 对象。

下面，咱们将在 template 标签内构件咱们的登陆表单。

<template>
    <div>
        <div v-if="!secrets.length" class="row">
            <form action="#" @submit.prevent="handleLogin">
                <div class="form-row">
                    <input type="email" v-model="formData.email">
                </div>
                <div class="form-row">
                    <input type="password" v-model="formData.password">
                </div>
                <div class="form-row">
                    <button type="submit">Sign In</button>
                </div>
            </form>
        </div>
    </div>
</template>

好了，一个登陆表单建立完成，它可能看起来像下面这样：

在上面代码中，咱们禁用了 form 表单的默认提交操做，并将它移交给 Vue 的 Submit 来处里。如今咱们建立 handleLogin 方法来处理用户的登陆请求：

<script>
export default {
    data() {
        return {
            secrets: [],
            formData: {
                email: '',
                password: ''
            }
        }
    },
    methods: {
        handleLogin() {
            // 处理登陆请求
        }
    }
}
</script>

最后，不要忘记将咱们的组件注册到 resources/js/app.js 文件中：

Vue.component('secret-component', require('./components/SecretComponent.vue).default);

而后在 app.blade.php 中使用该组件。如今咱们能够经过 handleLogin() 方法验证用户登陆操做了。

用户验证

若是看过 Laravel Sanctum documentation 这篇文章，你应该知道 SPA 单页应用的 csrf 保护实现方式，你须要先请求 /sanctum/csrf-cookie 以获取 csrf token。

而后，咱们请求 /login 路由，并将咱们的 email 和 password 字段传递给后端接口处理。

如今让咱们在 handleLogin() 方法中实现上面的需求：

handleLogin() {
    axios.get('/sanctum/csrf-cookie').then(response => {
        axios.post('/login', this.formData).then(response => {
            console.log('登陆成功!');
        }).catch(error => console.log(error)); // 若是验证不匹配
    });
}

如今，使用当咱们输入相应的信息你会发现流程已经走通。每一个请求都会受到 csrf 保护，并发送登陆接口所须要的 email 与 password 字段，即便如今没有响应数据，个人程序依然会经过 Promise 继续执行，而不会崩溃。

接下来要作什么？让咱们完成登陆操做吧！

用户检索

在咱们的 Vue 组件中，继续建立名为 getSecrets() 方法，该方法是用户登录成功以后，获取用户 secrets ，一般咱们会获得一个 secrets 数组，以后咱们将咱们的获得的新的数组替换组件中原有的数组。

打当用户登陆成功以后，咱们调用 getSecrets() 函数以完成后续操做。

handleLogin() {
    axios.get('/sanctum/csrf-cookie').then(response => {
        axios.post('/login', this.formData).then(response => {
            this.getSecrets();
        }).catch(error => console.log(error)); // credentials didn't match
    });
},
getSecrets() {
    axios.get('/api/secrets').then(response => this.secrets = response.data);
}

可是，如今程序中咱们返回的是全部用户 secrets。因此咱们须要在 index() 方修改它，以获得正确的数据：

public function index(Request $request)
{
    return $request->user()->secrets;
}

在登陆成功以后，全部须要用户验证的接口中的请求头中都会包含 laravel_session cookie，这样 Sanctum 能够经过该 cookie 来肯定并关联当前请求的用户。

以后，既可使用 $request 对象来获取用户的所有信息了，而后咱们将 secret 信息与用户关联，并将数据返回。

最后咱们将数据格式化、脱敏以后呈现给用户：

<template>
    <div>
        <div v-if="secrets.length" class="row">
            <div class="secret" v-for="(secret, index) in secrets" :key="index">
                <strong v-text="secret.secret"></strong> - created at <span v-text="secret.created_at"></span>
            </div>
        </div>
    </div>
</template>

? 如今咱们刷新应用，并使用咱们 fake 的用户数据登陆，就能够看到如下页面了：

至此，一个 SPA 单页应用的登陆操做完成。

总结和后续

我仅仅刚开始接触并使用该扩展，若是使用以上方式验证用户，则以后全部须要用户信息的接口能够实现像传统 web 应用的登陆操做同样，每一个请求都会携带用户状态。

固然，你也能够用 token 令牌的方式实现 SPA 单页应用的身份验证，移动以及桌面应用。俗话说的好条条大路通罗马。该文章只是围绕 documentation 该扩展展开的讨论与实践。

以上内容但愿帮助到你们，不少PHPer在进阶的时候总会遇到一些问题和瓶颈，业务代码写多了没有方向感，不知道该从那里入手去提高，对此我整理了一些资料，包括但不限于：分布式架构、高可扩展、高性能、高并发、服务器性能调优、TP6，laravel，YII2，Redis，Swoole、Swoft、Kafka、Mysql优化、shell脚本、Docker、微服务、Nginx等多个知识点高级进阶干货须要的能够免费分享给你们，须要的能够点击这里进阶PHP月薪30k>>>架构师成长路线【视频、面试文档免费获取】