使用 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 , 通过命令行来完成这些操作。

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

然后,接着运行数据库迁移命令生成 users 和 secrets 两个表。

我们需要对应用程序的两个模型类进行一些简单的修改,用于启用两个模型类之间的关联关系,所以接下来让我们打开这两个模型类文件,并且开始修改 :

我们 API 结构的最后一部分就是实际的路由和控制器。我们将仅仅访问一条网页路径就可以展示出跟当前用户的所有 secrets 信息。所以,我在 routes/api.php 文件中添加了以下内容:

可以使用 Artisan 命令轻松创建此控制器:

打开刚刚创建的控制器,让我们创建 index 方法,先返回所有的密钥。因为 现在 我们还无法获得经过身份验证的用户:

我们的虚拟 API 现在已经完成,来创建一些假用户和密钥吧。

填充数据库

你可以轻松地直接进入数据库并手动填充用户,创建控制器和表单以供用户输入自己的数据,或者使用 Artisan tinker 来半自动创建用户。我将跳过这些方法,使用内置的 Laravel 工厂为我们的用户和密钥生成假数据。

Laravel 带有一个开箱即用的 UserFactory.php 类,用来生成假用户。我们将为密钥创建一个类似的工厂类。在终端中运行以下 Artisan 命令:

打开生成的文件,我们只需用 user_id 和 secret 这两个数据填充每个模型:

你可能想知道为什么我们要在上面的片段中的 user_id 中使用硬编码。因为我不想基于用户数量随机生成它,而是希望对其进行更多控制。稍后,我将告诉你当我们开始生成秘密时如何覆盖它。

让我们从创建几个假用户开始。通过从站点根目录运行 php artisan tinker 命令来打开 Tinker Shell. 打开后,我们可以通过两次运行 global factory helper 来创建两个用户:

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 创建两个密钥:

但是如果第二个密钥拥有不同 ID 的用户呢?覆盖工厂类中的任何值都很容易,我们要做的就是将覆盖数组传递给 create() 方法。因此,我们将运行两次以下命令,为第二个假用户创建两个密钥:

我们的数据库中填充了足够的假数据之后,让我们继续安装和准备 Laravel Sanctum 软件包。

安装 Laravel Sanctum

安装轻而易举,可以通过在终端中运行一些命令来完成。首先,让我们使用 Composer 安装该软件包:

接下来运行以下命令发布迁移文件(并运行迁移):

Sanctum 安装的最后一部分要求我们修改 app\Http\Kernel.php 文件以包含一个中间件,该中间件会将 Laravel 的会话 cookie 注入到我们的应用程序前端中。这最终将使我们能够以经过身份验证的用户身份传递和检索数据:

现在,我们可以进入应用程序的前端了!

构建前端

从 Laravel 7 开始,前端和身份验证模板已从主程序包中剥离,可以单独安装。为了进行演示,我们将使用它和 Vue 来构建前端。

在应用程序的根目录运行以下命令将帮助我们配置环境:

上面的命令做了三件事:

1. 使用 Composer 安装 Laravel UI 软件包

2. 生成 JS/UI 文件、身份验证模板和 package.json 修改

3. 安装前端依赖项并编译开发环境的 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 标签内构件我们的登录表单。

好了,一个登录表单创建完成,它可能看起来像下面这样:

在上面代码中,我们禁用了 form 表单的默认提交操作,并将它移交给 Vue 的 Submit 来处里。现在我们创建 handleLogin 方法来处理用户的登录请求:

最后,不要忘记将我们的组件注册到 resources/js/app.js 文件中:

然后在 app.blade.php 中使用该组件。现在我们可以通过 handleLogin() 方法验证用户登录操作了。

用户验证

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

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

现在让我们在 handleLogin() 方法中实现上面的需求:

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

接下来要做什么?让我们完成登录操作吧!

用户检索

在我们的 Vue 组件中,继续创建名为 getSecrets() 方法,该方法是用户登陆成功之后,获取用户 secrets ,通常我们会得到一个 secrets 数组,之后我们将我们的得到的新的数组替换组件中原有的数组。

打当用户登录成功之后,我们调用 getSecrets() 函数以完成后续操作。

但是,现在程序中我们返回的是所有用户 secrets。所以我们需要在 index() 方修改它,以得到正确的数据:

在登录成功之后,所有需要用户验证的接口中的请求头中都会包含 laravel_session cookie,这样 Sanctum 可以通过该 cookie 来确定并关联当前请求的用户。

之后,既可以使用 $request 对象来获取用户的全部信息了,然后我们将 secret 信息与用户关联,并将数据返回。

最后我们将数据格式化、脱敏之后呈现给用户:

💥 现在我们刷新应用,并使用我们 fake 的用户数据登录,就可以看到以下页面了:

至此,一个 SPA 单页应用的登录操作完成。

总结和后续

我仅仅刚开始接触并使用该扩展,如果使用以上方式验证用户,则之后所有需要用户信息的接口可以实现像传统 web 应用的登录操作一样,每个请求都会携带用户状态。

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

更多学习内容可以访问【对标大厂】精品PHP架构师教程目录大全,只要你能看完保证薪资上升一个台阶(持续更新)

以上内容希望帮助到大家,很多PHPer在进阶的时候总会遇到一些问题和瓶颈,业务代码写多了没有方向感,不知道该从那里入手去提升,对此我整理了一些资料,包括但不限于:分布式架构、高可扩展、高性能、高并发、服务器性能调优、TP6,laravel,YII2,Redis,Swoole、Swoft、Kafka、Mysql优化、shell脚本、Docker、微服务、Nginx等多个知识点高级进阶干货需要的可以免费分享给大家,需要的可以加入我的PHP技术交流群953224940

进阶PHP月薪30k>>>架构师成长路线【视频、面试文档免费获取】

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 159,117评论 4 362
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,328评论 1 293
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,839评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,007评论 0 206
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,384评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,629评论 1 219
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,880评论 2 313
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,593评论 0 198
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,313评论 1 243
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,575评论 2 246
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,066评论 1 260
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,392评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,052评论 3 236
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,082评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,844评论 0 195
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,662评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,575评论 2 270

推荐阅读更多精彩内容