Day10-Route設定範例
昨天介紹了路由器基本的設置、配置屬性、和萬用字元等應用，今天想設定一個 Nabigation-bar 和 Guards 。

Nabigation-bar

「選單/導覽列」是指如下圖：【使用說明】、【收費方式】、【站點資訊】...
像一個導覽地圖，讓使用者可以快速找到需要的資訊。

延伸閱讀：
【UI 常見元件整理】Navigation 導覽
你的網站有好的導覽列頻道嗎？五大重點教你設計導覽列頻道

Route Guards

可應用在

1. User 未取得 Token
2. User 無權限進入此頁面(Component)
3. 離開頁面(Component)時，提示尚未儲存

種類

新增一隻守衛

ng generate guard auth/auth

Angular CLI 會問你想要哪種，這邊選了 canActivate。
官方範例程式：

// auth.guard
import { Injectable } from '@angular/core';
import { ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree, CanActivate } from '@angular/router';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate {
  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): boolean {
      // Ex.)非管理人員輸入後台網址，在這判斷無權限 return false 擋掉、順便導向至登入頁面
      // if(this.user.role==="MANAGER"){
      //   return true;
      // } else {
      //   this.aRouter.navigate(['/login']);
      //   return false;
      // }
      return true;
  }
}

匯入至 Routing Module

// app-routing.module.ts
const routes: Routes = [
  {
	path: '',
    component: NavigationBarComponent, //這邊用導覽列當父層
    canActivate: [AuthGuard], // 守衛++
    children: [
      { path: 'first', compoent: FirstComponent },
      { path: 'second', component: SecondComponent },
    ],
  },
  { path: 'login', component: LoginComponent },
  { path: '**', redirectTo: 'login', pathMatch: 'full' },
];

在導覽列這邊可以這樣設定：

官方文件：RouterLink

<button mat-button [matMenuTriggerFor]="menuList">站點資訊</button>
<mat-menu #menuList="matMenu">
  <button mat-menu-item [routerLink]="'first'">站點地圖</button>
  <button mat-menu-item [routerLink]="'second'">站點列表</button>
</mat-menu>

資料來源

Routing of an Angular Component | Angular Routing.
[從 0 開始的 Angular 生活]No.40 Angular Router 加上路由守衛 (Route Guards)