Laravel 8 前端快速上手
注意:为了使用 Passport 的 Vue 组件,你必须使用 Vue JavaScript 框架。这些组件也使用了 Bootstrap CSS 框架。然而,如果你不打算使用这些工具,这些组件对于你自己的前端组件编写也十分有价值。
提供了一系列 JSON API ,你可以用它们来允许你的用户创建客户端和个人访问令牌。然而,编写与这些 API 交互的前端代码可能是很占用时间的。因此,Passport 也包括了预编译的 Vue 组件,你可以直接使用或将其作为你自己的前端参考。
要使用 Passport 的 Vue 组件,使用 vendor:publish
Artisan 命令:
php artisan vendor:publish --tag=passport-components
被发布的组件将会被放到 resources/js/components
目录下。当组件被发布后,你应该在你的 resources/js/app.js
文件中注册它们:
Vue.component(
'passport-clients',
require('./components/passport/Clients.vue').default
);
Vue.component(
'passport-authorized-clients',
require('./components/passport/AuthorizedClients.vue').default
);
Vue.component(
'passport-personal-access-tokens',
require('./components/passport/PersonalAccessTokens.vue').default
);
注意:在 Laravel v5.7.19 之前,在注册组件时添加
.default
会导致控制台错误。有关此更改的解释,请参阅 Laravel Mix v4.0.0 release notes 发布说明。
注册完组件之后,需要运行 npm run dev
重新编译代码。编译好之后就可以在项目中使用组件建立客户端和个人访问令牌:
<passport-clients></passport-clients>
<passport-authorized-clients></passport-authorized-clients>
<passport-personal-access-tokens></passport-personal-access-tokens>