Angular Routing
authGuard, Route Guards, 路由守衛,
引言
範例
路由守衛(Route Guards)
routerLink 屬性
Last updated
authGuard, Route Guards, 路由守衛,
Last updated
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 { }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;
}<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>