ANGULAR | akveo/nebular 系列 - 6.2. 安裝安全延伸模組 | 中文

原文：https://akveo.github.io/nebular/docs/auth/installation

安裝

注意
如果您使用我們的 ngx-admin 入門套件) 那麼您已經有認證模組了。

安裝模組

首先，我們可以從 npm 安裝這個模組，並且確認您有 安裝 Nebular 主題模組。
Nebular 主題是內建認證元件的需求。如果您不想使用內建認證元件，可以只使用 認證模組，而不需要使用 Nebular 主題。

npm i @nebular/auth

---

引用

引用 NbAuthModule 模組以及 NbPasswordAuthStrategy 策略類別:

import { NbPasswordAuthStrategy, NbAuthModule } from '@nebular/auth';

---

配置策略類別

現在讓我們利用特定的「策略（strategy）」配置這個模組，這個例子我們加入 NbPasswordAuthStrategy。
我們須要透過呼叫靜態方法 setup 以傳入一個 選項清單 以加入一個策略：

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

我們也規定 forms 鍵（key），以為認證元件配置可用的選項。
我們現在先留白，詳細請參考 配置認證 UI 元件 文章。

---

啟用 Auth 元件

下一步我們須要配置認證元件的路由，讓我們加入以下程式碼到您的 app-routing.module.ts 檔案:

import {
  NbAuthComponent,
  NbLoginComponent,
  NbRegisterComponent,
  NbLogoutComponent,
  NbRequestPasswordComponent,
  NbResetPasswordComponent,
} from '@nebular/auth';

export const routes: Routes = [
  // ... 
  
  {
    path: 'auth',
    component: NbAuthComponent,
    children: [
      {
        path: '',
        component: NbLoginComponent,
      },
      {
        path: 'login',
        component: NbLoginComponent,
      },
      {
        path: 'register',
        component: NbRegisterComponent,
      },
      {
        path: 'logout',
        component: NbLogoutComponent,
      },
      {
        path: 'request-password',
        component: NbRequestPasswordComponent,
      },
      {
        path: 'reset-password',
        component: NbResetPasswordComponent,
      },
    ],
  },
  
];

---

啟用樣式

最後，但不代表最不重要 - 安裝元件樣式到您的 styles.scss (更多細節):

@import '~@nebular/auth/styles/all'; // 或是 @import '~@nebular/auth/styles/{theme-name}';

// ... 

@include nb-install() {
  @include nb-theme-global();
  @include nb-auth-global(); // 附加安裝 mixin 在 nb-install 裡面
};

此時，您可以打開瀏覽起瀏覽 http://localhost:4200/#/auth/login 即顯示一個登入頁。

---

相關文章

• 配置認證策略
• 調整認證元件 UI