ANGULAR | akveo/nebular 系列 - 6.5. 取得使用者通行證 | 中文

原文：https://akveo.github.io/nebular/docs/auth/getting-user-token

取得使用者通行證

在登入或註冊之後取得使用者通行證

這一步，我們假設 Nebular 認證模組已經安裝好也可以運行了，您已經成功配置認證策略和根據您的需求調整認證產品外觀。
在成功認證後可以取得使用者通行證，有能力與伺服器通訊，例如顯示 username 在應用程式的標頭位置。我們假設您的後端回傳一個 JWT 通行證，所以我們可以使用通行證的「負載資訊 payload」以擷取出使用者的資訊。
每一個 策略 都有預設的通行證類別。例如 NbPasswordAuthStrategy 使用 NbAuthSimpleToken ，又例如 NbOAuth2AuthProvider 使用 NbAuthOAuth2Token。如果需要可以指定另一個通行證類別，下方舉例說明。

配置通行證型態

讓我們告訴 Nebular 我們正等待 JWT 通行證而不是簡單字串通行證。
我們只需要提供相對應的類別即可。打開您的 app.module.ts 並調整您的 策略 配置：

@NgModule({
  imports: [
   // ...
   NbAuthModule.forRoot({
         strategies: [
           NbPasswordAuthStrategy.setup({
             name: 'email',
             
             token: {
               class: NbAuthJWTToken,
             }
           }),
         ],
         forms: {},
       }), 
  ],
});

這一行告訴 Angular 注入 NbAuthJWTToken (而不是預設的 NbAuthSimpleToken ) ，它是一個包裝類別，會包裝好從您的 API 服務回應的值。

配置通行證萃取

然後，我們配置 NbPasswordAuthStrategy 應該在登入或註冊的回應資料中找到通行證。
使用預設的 NbPasswordAuthStrategy 預期您的通行證是位於以 JSON 格式回應的 data.token 鍵之下：

{
  data: {
    token: 'some-jwt-token'
  }
}

我們假設我們 API 只回應一個通行證像是 { token: 'some-jwt-token' } 沒有包裝您的回應在 data 屬性中，讓我們告訴 Nebular：

@NgModule({
  imports: [
   // ...
    
   NbAuthModule.forRoot({
         strategies: [
           NbPasswordAuthStrategy.setup({
             name: 'email',
             
             token: {
               class: NbAuthJWTToken,
              
               key: 'token', // 這個參數告知從哪裡查到通行證的值
             }
           }),
         ],
         forms: {},
       }), 
  ],
});

使用通行證

好的，讓我們使用通行證擷取負載資訊並顯示 username 在標頭中。打開您的 header.component.ts 並 import 以下服務：

import { NbAuthJWTToken, NbAuthService } from '@nebular/auth';

然後我們建立 user 變數，將通行證中負載資訊儲存在元件中：

@Component({
  ...
})
export class HeaderComponent {

  user = {};

  ...
}

然後我們注入 NbAuthService 並且訂閱一個 onTokenChange 方法，在每次通行證更新時它會推送一個事件，所以標頭元件不須要額外地刷新或請求資料即可跟上來自後端的最新資訊：

@Component({
  ...
})
export class HeaderComponent {

  user = {};

  constructor(private authService: NbAuthService) {
      this.authService.onTokenChange()
      .subscribe((token: NbAuthJWTToken) => {
      
        if (token.isValid()) {
          this.user = token.getPayload(); // 這裡我們取得來自通行證地負載資訊並且分配給 `user` 變數。
        }
        
      });
  }
}

最後，我們把 user 變數放置在 template 中以顯示使用者的資訊。
在這裡， nb-user 元件是一個非常適合的元件：

@Component({
  template: `
      <nb-layout-header fixed>
      <nb-user [name]="user?.name" [picture]="user?.picture"></nb-user>
    </nb-layout-header>
  `
})
export class HeaderComponent implements OnInit {
  ...
}

我們假設可以從負載資訊中擷取 name 和 picture 屬性

完成！相對來說您可以注入 NbAuthService 在任何元件中，以管理您在應用程式中認證的狀態。

相關文章

• NbAuthService
• NbTokenService