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>