# 使用Passport API和vue组件管理客户端和令牌

现在我们介绍了如何手动创建客户端和令牌，以及如何作为使用者进行授权，让我们看看Passport API一些方面，它可以构建用户界面元素从而允许用户管理他们的客户端和令牌。

**路由** 

深入研究API路由的最简单方法是查看示例提供的Vue组件是如何工作的以及它们依赖哪些路由，因此我将简要概述一下：

```
/oauth/clients (GET, POST)
/oauth/clients/{id} (DELETE, PUT)
/oauth/personal-access-tokens (GET, POST)
/oauth/personal-access-tokens/{id} (DELETE)
/oauth/scopes (GET)
/oauth/tokens (GET)
/oauth/tokens/{id} (DELETE)
```

如您所见，我们在这里有几个实体（客户端，个人访问令牌，作用域和令牌）。 我们列出了所有这些; 我们可以创建（你不能创建作用域，因为它们是在代码中定义的，你不能创建令牌，因为它们是在授权流程中创建的）; 我们也可以删除和更新（PUT）。

**Vue 组件** 

Passport 附带了一组Vue组件使得用户可以方便的管理他们的客户端(他们创建的)，授权客户端（允许访问他们的账户）以及个人访问令牌(用于他们自己的测试目的)。 要将这些组件发布到应用程序中，请运行以下命令

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

现在你在resources/js/components/passport有3个Vue 组件，添加他们到Vue 引导以便在模板中可以访问他们，可以注册到resources/js/app.js文件中，如示例13-36

```javascript
require('./bootstrap');
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'});
```

现在你获取了一个可以在应用任何地方都可用的三个组件

```markup
<passport-clients></passport-clients>
<passport-authorized-clients></passport-authorized-clients>
<passport-personal-access-tokens></passport-personal-access-tokens>
```

\<passport-clients>显示用户创建的所有客户端。这意味着当他们登录到tweeter时，Spacebook的创建者将看到这里列出的Spacebook客户端。

\<passport-authorized-clients>展示授权访问账号的所有客户端，这意味着，任何同时拥有SpaceBook和Tweeeter账户的用户都可以看到列出的SpaceBook。

\<passport-personal-access-tokens>显示用户创建的个人访问令牌，例如RaceBook的创建者，SpaceBook的竞争者，将看到他们用来测试Tweeter API的个人访问令牌。

如果您正在安装新的laravel，并想测试这些，有如下几个步骤：

1. 按照本章前面的说明安装Passport
2. 在你的命令行执行如下命令

```
php artisan vendor:publish --tag=passport-components
npm install
npm run dev
php artisan make:auth
```

&#x20;  3\. 打开resources/views/home.blade.php，在\<div class="card-body"> 下面添加vue引用（例如\<passport-clients>\</passport-clients>）。

如果你愿意的话也可以直接使用这些组件，你也可以把他们作为引用点来理解API使用，并以你喜欢的格式创建前端组件。


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://liseen315.gitbook.io/laravel/bian-xie-apis/api-ren-zheng-he-laravel-passport/shi-yong-passport-api-he-vue-zu-jian-guan-li-ke-hu-duan-he-ling-pai.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.