ANGULAR | akveo/nebular 系列 - 6.4. 認證 UI 元件 | 中文

原文：https://akveo.github.io/nebular/docs/auth/configuring-ui

認證 UI 元件

認證模組由這些認證元件組成：

• <nb-auth-block></nb-auth-block> - 元件包裝，為已經包含在這個元件內的 Form 提供基礎的樣式
• <nb-register></nb-register> - 註冊頁
• <nb-login></nb-login> - 登入頁
• <nb-logout></nb-logout> - 登出頁 - 當送出登出請求時，顯示 “登出中…” 訊息
• <nb-request-password></nb-request-password> - 要求密碼頁
• <nb-reset-password></nb-reset-password> - 重置密碼頁

  ---

UI 設定

AuthModule 除了接受「策略」的配置也接受 UI 的設定，在 forms 鍵下：

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

你可以為每個表單單獨配置，以下是預設值：

export interface NbAuthSocialLink {
  link?: string,
  url?: string,
  target?: string,
  title?: string,
  icon?: string,
}

const socialLinks: NbAuthSocialLink[] = [];

export const defaultSettings: any = {
  forms: {
    login: {
      redirectDelay: 500, // 要顯示成功訊息給使用者時，在成功登入後，重新導向前給予延遲時間。
      strategy: 'email',  // 策略 id 鍵.
      rememberMe: true,   // 是否顯示 `記住我` 之 Checkbox
      showMessages: {     // 是否顯示成功/錯誤訊息
        success: true,
        error: true,
      },
      socialLinks: socialLinks, // 顯示社群連結在頁面下方
    },
    register: {
      redirectDelay: 500,
      strategy: 'email',
      showMessages: {
        success: true,
        error: true,
      },
      terms: true,
      socialLinks: socialLinks,
    },
    requestPassword: {
      redirectDelay: 500,
      strategy: 'email',
      showMessages: {
        success: true,
        error: true,
      },
      socialLinks: socialLinks,
    },
    resetPassword: {
      redirectDelay: 500,
      strategy: 'email',
      showMessages: {
        success: true,
        error: true,
      },
      socialLinks: socialLinks,
    },
    logout: {
      redirectDelay: 500,
      strategy: 'email',
    },
    validation: {
      password: {
        required: true,
        minLength: 4,
        maxLength: 50,
      },
      email: {
        required: true,
      },
      fullName: {
        required: false,
        minLength: 4,
        maxLength: 50,
      },
    },
  },
};

---

刪除重新導向的延遲時間

如果要刪除重新導向的延遲時間以及不再使用成功訊息時，可以參考以下範例：

@NgModule({
  imports: [
   // ...
    
   NbAuthModule.forRoot({
         strategies: [
           NbPasswordAuthStrategy.setup({
             name: 'email',
           }),
         ],
         forms: {
           login: {
             redirectDelay: 0,
             showMessages: {
               success: false,
             },
           },
           register: {
             redirectDelay: 0,
             showMessages: {
               success: false,
             },
           },
           requestPassword: {
             redirectDelay: 0,
             showMessages: {
               success: false,
             },
           },
           resetPassword: {
             redirectDelay: 0,
             showMessages: {
               success: false,
             },
           },
           logout: {
             redirectDelay: 0,
           },
         },
       }), 
  ],
});

如果看起來有點冗長，可以移動重複的部分到一個變數中像是：

const formSetting: any = {
  redirectDelay: 0,
  showMessages: {
    success: false,
  },
};

@NgModule({
  imports: [
   // ...
    
   NbAuthModule.forRoot({
         strategies: [
           NbPasswordAuthStrategy.setup({
             name: 'email',
           }),
         ],
         forms: {
           login: formSetting,
           register: formSetting,
           requestPassword: formSetting,
           resetPassword: formSetting,
           logout: {
             redirectDelay: 0,
           },
         },
       }), 
  ],
});

這個設定將與預設值合併，所以不須要特別輸入所有的鍵值到這裡。

---

客製化 UI 元件

案例中，當 Nebular 認證元件的產品外觀無法滿足您的需求時，您可以簡單地以 Nebular 所提供地認證元件為基礎建立客製化認證元件。

您需要做地就是：

複製元件原始碼

複製您想要變更在您專案的元件 原始碼。如果您使用 ngx-admin，您可以放置於 src/app/@theme/components/auth。重新命名元件以確認您的應用程式前綴，例如使用 ngx- 作為前綴。

不用複製其他認證模組的檔案
不須要複製服務以及其他檔案，否則會與原生的 Nebular 認證模組發生衝突。

重新命名
確認以重新命名元件類別的名稱以及根據應用程式的 prefix 重新命名 selectors。您可以使用您編輯器的 重構 Refactor 功能。

註冊元件

註冊主題到您的 *.module.ts (例如 theme.module.ts):

// make sure the path is correct for your setup
import { NgxAuthComponent } from './components/auth/auth.component';
import { NgxAuthBlockComponent } from './components/auth/auth-block/auth-block.component';
import { NgxLoginComponent } from './components/auth/login/login.component';
import { NgxRegisterComponent } from './components/auth/register/register.component';
import { NgxLogoutComponent } from './components/auth/logout/logout.component';
import { NgxRequestPasswordComponent } from './components/auth/request-password/request-password.component';
import { NgxResetPasswordComponent } from './components/auth/reset-password/reset-password.component';


@NgModule({
  imports: [...],
  declarations: [
  
      ...
       
      NgxAuthComponent,
      NgxAuthBlockComponent,
      NgxLoginComponent,
      NgxRegisterComponent,
      NgxRequestPasswordComponent,
      NgxResetPasswordComponent,
      NgxLogoutComponent,
    ],
})
export class ThemeModule {

在這個例子我們決定複製所有認證元件徹底重作 UI。

更新路由

import 新的元件以更新您的路由：

import { NgxAuthComponent } from './components/auth/auth.component';
import { NgxAuthBlockComponent } from './components/auth/auth-block/auth-block.component';
import { NgxLoginComponent } from './components/auth/login/login.component';
import { NgxRegisterComponent } from './components/auth/register/register.component';
import { NgxLogoutComponent } from './components/auth/logout/logout.component';
import { NgxRequestPasswordComponent } from './components/auth/request-password/request-password.component';
import { NgxResetPasswordComponent } from './components/auth/reset-password/reset-password.component';

export const routes: Routes = [
  // ... 
  
  {
    path: 'auth',
    component: NgxAuthComponent,
    children: [
      {
        path: '',
        component: NgxLoginComponent,
      },
      {
        path: 'login',
        component: NgxLoginComponent,
      },
      {
        path: 'register',
        component: NgxRegisterComponent,
      },
      {
        path: 'logout',
        component: NgxLogoutComponent,
      },
      {
        path: 'request-password',
        component: NgxRequestPasswordComponent,
      },
      {
        path: 'reset-password',
        component: NgxResetPasswordComponent,
      },
    ],
  },
  
];

現在您可以根據您的須要調整元件。請確保與 NbAuthService 相關的邏輯保持不變，使這些元件仍然可以與認證策略通信。

---

下一站

• 接收認證後的使用者通行證