Angular 路由守卫

我们在开发的过程中，经常会遇到需要某些权限才能进入的页面，这时後就会需要路由守卫的机制啦，
而它最常用在登入画面时

快速建立

Angular CLI 提供了命令列工具，可以快速建立路由守卫框架档案：

ng generate guard auth

或

ng g g auth

官网介绍：guard

执行後，Angular CLI 会问我们需要实现哪些介面，我们直接勾选即可

? Which interfaces would you like to implement? (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) CanActivate
 ( ) CanActivateChild
 ( ) CanDeactivate
 ( ) CanLoad

• CanActivate: 控制路由是否可以启用
• CanActivateChild: 控制子路由是否可以启用
• CanDeactivate: 控制路由是否可以退出
• CanLoad: 控制模组（module）是否可以被载入

建立完後 会生成一只 auth.guard.ts

import { Injectable } from "@angular/core";
import {
  ActivatedRouteSnapshot,
  CanActivate,
  RouterStateSnapshot,
  UrlTree,
} from "@angular/router";
import { Observable } from "rxjs";

@Injectable({
  providedIn: "root",
})
export class AuthGuard implements CanActivate {
  canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ):
    | Observable<boolean | UrlTree>
    | Promise<boolean | UrlTree>
    | boolean
    | UrlTree {
    // 条件若符合的话 就能成功跳转
    return true;
  }
}

接着我们就可以在在这页设定是否让页面跳转

在 router 里启用路由

const routes: Routes = [
  {
    path: "login",
    component: LoginComponent,
  },
  {
    path: "",
    component: HomeComponent,
    canActivate: [AuthGuard], // 启用路由
  },
  {
    path: "",
    pathMatch: "full",
    redirectTo: "/",
  },
];

基本设定大概是这样，明天就来介绍如何使用范例吧！