Angular Routing

authGuard, Route Guards, 路由守衛,

引言

Angualr 內附有 routing 能力也足以處理 routing 所有問題。路由全在 app-routing.module.ts 檔案處理，可再搭配 guard 進行路由守衛(Route Guards)。

官方文件: Common Routing Tasks

Other routing tasks • AngularAngular

Angular - Common Routig Tasks

範例

app-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component'
import { PageNotFoundComponent } from './page-not-found.component';
import { LoginComponent } from './account/login/login.component';
import { AuthComponent } from './account/auth/auth.component'
import { authGuard } from './auth.guard';
import { Demo001Component } from './demo/demo001/demo001.component'
import { Demo002Component } from './demo/demo002/demo002.component'
import { Demo003Component } from './demo/demo003/demo003.component'
import { Demo004Component } from './demo/demo004/demo004.component'

const routes: Routes = [
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  { path: 'home', component: HomeComponent },
  { path: 'login', component: LoginComponent },
  { path: 'auth', component: AuthComponent },
  { path: 'demo001', component: Demo001Component, canActivate: [authGuard] },
  { path: 'demo002', component: Demo002Component, canActivate: [authGuard] },
  { path: 'demo003', component: Demo003Component, canActivate: [authGuard] },
  { path: 'demo004', component: Demo004Component, canActivate: [authGuard] },
  { path: '**', component: PageNotFoundComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

路由守衛(Route Guards)

auth.guard.ts

import { CanActivateFn, Router, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { inject } from '@angular/core';
import { AuthService } from './shared/auth.service';

export const authGuard: CanActivateFn = (route, state) => {
  const router = inject(Router);
  const isAuthenticated = checkIfAuthenticated(route, state);

  if (isAuthenticated)
    return true;

  router.navigate(['/login']);
  return false;
};

function checkIfAuthenticated(route:ActivatedRouteSnapshot, state:RouterStateSnapshot): boolean {
  const authSvc = inject(AuthService);

  console.log('checkIfAuthenticated', {
    url: state.url,
    isAuthed: authSvc.isAuthed,
    authSvc,
    route,
    state
  })

  return authSvc.isAuthed;
}

routerLink 屬性

用 routerLink 屬性指定 routing url 以切換功能頁面；若用 href 會刷新瀏灠狀態。

banner.component.html

<header>
  <nav>
    <a routerLink="/">Home</a>
    <a routerLink="/auth">Auth</a>
    <a routerLink="/demo001">DEMO 001</a>
    <a routerLink="/demo002">DEMO 002</a>
    <a routerLink="/demo003">DEMO 003</a>
    
    <div style="float:right;">
      <a routerLink="/login" style="margin-right:8px;">登入</a>
    </div>
  </nav>
</header>

(EOF)