vuejs2 - 如何使用 Laravel Passport 和客户端凭据使用自己的 api？

Question

我已经为具有个人访问令牌的用户正确设置了它，但想保护所有 api 路由。阅读文档听起来像是客户凭证授予令牌是我需要的。我的.env文件中有一个客户 ID 和客户密码；我已经添加了client中间件，\Laravel\Passport\Http\Middleware\CheckClientCredentials::class并将其应用于一些 api 路由。

我正在使用 Vue 和 axios。

如何获取和设置访问这些受保护的 api 路由所需的令牌？

Answer 1

Laravel 文档对“使用自己的 API”并不清楚。我还在 Google 上搜索了几天，甚至订阅了 Laracasts。没有帮助。我现在开始工作了，这是我笔记中的一个转储。

第 1 步 - 安装 Passport

composer require laravel/passport
php artisan migrate
php artisan passport:install

第 2 步 - 编辑 /app/User.php

use HasApiTokens,Notifiable

第 3 步 - 编辑 /app/Providers/AuthServiceProvider.php

use Laravel\Passport\Passport;

public function boot()
{
    $this->registerPolicies();
    Passport::routes();
}

第 4 步 - 编辑 /config/auth.php

enter code     'api' => [
    'driver' => 'passport',
    'provider' => 'users',
],

第 5 步 - 前端快速入门

php artisan vendor:publish --tag=passport-components

第 6 步 - 编辑 /resources/assets/js/app.js

require('./bootstrap');

window.Vue = require('vue');

Vue.component(
    'passport-clients',
    require('./components/passport/Clients.vue')
);

Vue.component(
    'passport-authorized-clients',
    require('./components/passport/AuthorizedClients.vue')
);

Vue.component(
    'passport-personal-access-tokens',
    require('./components/passport/PersonalAccessTokens.vue')
);

const app = new Vue({
    el: '#app'
});

第 7 步 - 身份验证路由和视图脚手架

php artisan make:auth

第 8 步 - 编辑 /app/Http/Kernel.php

 protected $middlewareGroups = [
        'web' => [
            ...
            \Laravel\Passport\Http\Middleware\CreateFreshApiToken::class,

第 9 步 - 编辑 /routes/web.php （这回答了你的问题）

// Authorization routes Laravel Passport
Auth::routes();

// Landing page
Route::get('/', function () { return view('welcome');});

// Auth protected routes
Route::group(['middleware' => ['web', 'auth']], function () {
    Route::get('home', 'HomeController@index')->name('home');
    Route::get('example', function(){ return view('example'); });
}
//(stolen from /vendor/laravel/passport/src/RouteRegistrar.php - forAuthorization method)

第 10 步 - 编译资产

npm i -g npm
npm install
npm run dev

第 11 步 - 什么都没有。您不必在 VueJS 和 Axios 方面做任何事情。

你可以这样做：

axios.get('URL_XYZ')
.then(response => {
    console.log(response.data);
});

Laravel 文档：

当使用这种身份验证方法时，默认的 Laravel JavaScript 脚手架会指示 Axios 始终发送 X-CSRF-TOKEN 和 X-Requested-With 标头。

资料来源：
https ://laravel.com/docs/5.5/passport
https://www.itechempires.com/2017/09/laravel-5-5-api-user-authentication-passport-package/