使用LaravelSanctum轻松验证VueSPA

今年早些时候发布的LaravelSanctum（以前称为LaravelAirlock）是一个轻量级扩展，它使验证可以构建在单页应用程序或本机移动应用程序上，过程变得一样简单和尽可能无痛。在此之前，你要么使用基于session的web中间件，要么使用外部集成的依赖包，比如Tymon的jwt-auth，而现在，你可以使用Sanctum来完成statefulauthentication和token-basedauthentication。在这个简短的测试中，我将向您展示如何使用LaravelSanctum从头开始??构建一个项目。我们将创建一个虚拟API，通过Vue组件对用户进行身份验证，并获取与该登录用户关联的数据。准备好了，接下来，一起来装盘吧！创建一个测试API我们需要做的第一件事是创建一个API接口，我们可以从中获取数据。我想出了一个超级简单的应用程序，它可以检索显示每个用户的秘密列表。我已经安装了开箱即用的Laravel应用程序，并使用LaravelDocker设置将其配置为在我的本地环境中与MySQL数据库一起运行。我要做的第一件事就是为我们的secret创建一个模型类和相关的迁移文件，这里我们可以很方便的使用artisan通过命令行来完成这些操作。phpartisanmake:modelSecret--migration接下来，让我们打开迁移文件并添加一些描述秘密需求的数据列。我认为我们需要的（除了Laravel提供的默认ID和时间戳之外）是一个与用户相关联的user_id整数字段，以及一个实际保存用户秘密信息的字段。Schema::create('secrets',function(Blueprint$table){$table->id();$table->integer('user_id');$table->text('secret');$table->时间戳（）；}）；然后，运行数据库迁移命令生成用户和机密两张表。phpartisanmigrate我们需要对应用程序的两个模型类进行一些简单的修改，使两个模型类之间的关系，所以我们打开两个模型类文件，开始修改：//User.phppublicfunctionsecrets(){return$this->hasMany('App\Secret');}//Secret.phppublicfunctionuser(){return$this->belongsTo('App\User');}我们API结构的最后一部分是实际路线和控制器。我们只会访问一个网页路径来显示当前用户的所有机密信息。因此，我将以下内容添加到routes/api.php文件中：Route::get('/secrets','SecretController@index');使用Artisan命令可以轻松创建此控制器：phpartisanmake:controllerSecretControlleropen我们刚刚创建的控制器，让我们先创建一个返回所有键的索引方法。由于我们还不能获得经过身份验证的用户：publicfunctionindex(){returnApp\Secret::all();}我们的虚拟API现在已经完成，让我们创建一些假用户和秘密。填充数据库您可以轻松地直接进入数据库并手动填充用户，创建控制器和表单供用户输入自己的数据，或者使用Artisantinker半自动创建用户。我将跳过这些方法并使用内置的Laravel工厂为我们的用户和密钥生成虚假数据。Laravel附带了一个开箱即用的UserFactory.php类，用于生成虚假用户。我们将为键创建一个类似的工厂类。在终端运行以下Artisan命令：phpartisanmake:factorySecretFactory--model=Secret打开生成的文件，我们只需要为每个模型填充user_id和secret这两个数据：$factory->define(Secret::class,function(Faker$faker){return['user_id'=>1,'secret'=>$faker->text];});您可能想知道为什么我们要在上面的代码片段中对user_id进行硬编码。因为我不想根据用户数量随机生成它，而是想对它有更多的控制权。稍后，我将向您展示如何在我们开始生成机密时覆盖它。让我们从创建一些假用户开始。通过从站点根目录运行phpartisantinker命令打开TinkerShell。打开后，我们可以通过运行全局工厂助手两次来创建两个用户：factory(App\User::class)->create();//与make不同，create将我们的用户保存在数据库中现在我们已经生成了它们，让我们创建我们的秘密。我将在tinkershell中运行以下命令两次，为user_id1创建两个：让我们创建我们的密钥。我在tinker中运行以下命令两次，为user_id1创建两个秘密：factory(App\Secret::class)->create();但是，如果第二个秘密的用户具有不同的ID怎么办？覆盖工厂类中的任何值很容易，我们所要做的就是将覆盖数组传递给create()方法。因此，我们将运行以下命令两次，为第二个假用户创建两个秘密：factory(App\Secret::class)->create(['user_id'=>2]);我们的数据库中填充了足够多的假数据，让我们继续安装和准备LaravelSanctum包。安装LaravelSanctum非常容易，只需在终端中运行一些命令即可完成。首先，让我们使用Composer安装包：composerrequirelaravel/sanctum接下来运行以下命令发布迁移文件（并运行迁移）：phpartisanvendor:publish--provider="Laravel\Sanctum\SanctumServiceProvider"phpartisanmigrateSanctum安装最后一部分要求我们修改app\Http\Kernel.php文件以包含一个中间件，它将Laravel的会话cookie注入我们的应用程序前端。这最终将允许我们作为经过身份验证的用户传递和检索数据：'api'=>[EnsureFrontendRequestsAreStateful::class,'throttle:60,1']现在我们可以进入应用程序的前端了！构建前端从Laravel7开始，前端和身份验证模板已从主包中剥离出来，可以单独安装。为了演示，我们将使用它和Vue来构建前端。在应用程序的根目录运行以下命令将帮助我们配置环境：composerrequirelaravel/uiphpartisanuivue--authnpminstall&&npmrundev上面的命令做了三件事：使用Composer安装LaravelUI包生成JS/UI文件、认证模板、package.json修改安装前端依赖，编译开发环境的JS/CSS文件删除div中的内容，增加id="app"属性。这将是我们的Vue应用程序的挂载点，如我们刚刚生成的app.js文件中所述。让我们创建一个Vue组件，它将保存我们的登录表单并显示一些秘密。在创建Vue组件之前，我们可以通过命令：phpartisanuivue快速生成我们的前端代码，默认会生成一个resources/js/components/ExampleComponent.vue组件示例。好了，现在我们新建一个组件：SecretComponent.vue，它的代码如下：有两个字段要返回，其中secrets字段是一个数组，还有一个formData对象，存储了用户的email和password字段。接下来，我们将在模板标签内构建我们的登录表单。好的，一个创建登录表单后，它可能看起来像这样：在上面的代码中，我们禁用了表单表单的默认提交操作，并将其交给Vue的提交处理程序。现在我们创建handleLogin方法来处理用户的登录请求：(){//处理登录请求}}}最后，不要忘记在resources/js/app.js文件中注册我们的组件：Vue.component('secret-component',require('./components/SecretComponent.vue).default);然后使用app.blade.php中的组件。现在我们可以通过handleLogin()方法验证用户登录操作。用户认证如果你看过LaravelSanctum文档文章，你应该知道如何为SPA单页应用程序实现csrf保护。您需要请求/sanctum/csrf-cookie来获取csrf令牌。然后我们请求/login路由并将我们的电子邮件和密码字段传递给后端接口进行处理。现在让我们在handleLogin()方法中实现上面的需求：handleLogin(){axios.get('/sanctum/csrf-cookie').then(response=>{axios.post('/login',this.formData).then(response=>{console.log('Successfullogin!');}).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));//凭据不匹配});},getSecrets(){axios.get('/api/secrets').then(response=>this.secrets=response.data);}但是，现在在程序中我们返回所有用户机密。所以我们需要在index()端修改一下，获取正确的数据：publicfunctionindex(Request$request){return$request->user()->secrets;}登录成功后，所有需要用户认证的接口中的请求头会包含laravel_sessioncookie，这样Sanctum就可以使用这个cookie来确定和关联当前请求的用户。之后，我们可以通过$request对象获取用户的所有信息，然后我们将秘密信息与用户关联起来，返回数据。最后，我们将数据格式化脱敏后呈现给用户：？现在我们刷新应用，用我们的假用户数据登录，可以看到如下页面：至此，一个SPA单页应用的登录操作就完成了。总结与后续我刚刚开始接触和使用这个扩展。如果使用上面的方法对用户进行认证，那么所有需要用户信息的接口都可以实现。和传统Web应用的登录操作一样，每次请求都会携带用户状态。当然你也可以使用token令牌来实现对SPA单页应用、移动端和桌面端应用的认证。俗话说，条条大路通罗马。本文只是围绕文档的扩展进行讨论和实践。更多学习内容，可访问【与各大厂商对比】优质PHP架构师教程目录。只要能读懂，就能保证你的薪水更上一层楼（持续更新中）。以上内容希望对大家有所帮助。很多PHPer总会遇到一些问题和瓶颈，业务代码写多了没有方向感，不知道从哪里开始改进，我整理了一些这方面的资料，包括但不限于：分布式架构，高可扩展性、高性能、高并发、服务器性能调优、TP6、laravel、YII2、Redis、Swoole、Swoft、Kafka、Mysql优化、shell脚本、Docker、微服务、Nginx等知识点免费分享给你如果你需要高级干货。有需要可以点这里进阶PHP月薪30k>>>架构师成长之路【免费获取视频和面试资料】