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: '**',