ng 命令解析之guard(各种路由守卫推倒表)

1.ng g guard guardName 是创建一个路由守卫,用于路由拦截，拦截的方式各种各样，比如  是否允许路由导航到的模块加载，加载前的数据获取，加载后的界面渲染，离开前的数据保存等

CanLoad 用来处理异步导航到某特性模块(是否允许加载模块，仅适用于自定义模块挂载在主路由上)

// user-canload.guard.ts
import { Injectable } from '@angular/core';
import { CanLoad, Route, UrlSegment, UrlTree } from '@angular/router';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class UserCanloadGuard implements CanLoad {
  canLoad(
    route: Route,
    segments: UrlSegment[]): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
      console.log(route.path);
    return this.isLogin();
  }
   
  // 检测是否允许加载这个路由模块  true 表示允许，false表示不允许
  isLogin(){
    console.log('load checking');
    return false;
  }
}

/// app-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { AdminComponent } from './views/admin/admin.component'

import { UserCanloadGuard } from './guard/user-canload.guard' //引入
const routes: Routes = [
  {
    path: '',
    component:AdminComponent
  },
  {
    path: 'user',
    canLoad:[UserCanloadGuard], //可以添加多个守卫
    loadChildren: ()=>import('./module/user/user-routing.module').then(m=>m.UserRoutingModule)
  },
  {
    path: '**',