Angular 13应用初始化阶段如何实现路由解析？

• 组件加载前完成全局路由解析，无需为单条路由逐个配置守卫
• 根路径/必须绑定对应业务组件，不接受根路径为空壳组件、仅挂载子路由的方案
• 全局守卫需同时覆盖根路径与所有子路由，支持获取真实访问URL

之前使用APP_INITIALIZER的方案无法获取真实URL，核心原因是执行时机不对：APP_INITIALIZER运行在Angular核心服务初始化阶段，此时路由的初始导航还未启动，Router没有读取解析浏览器地址栏的真实路径，因此router.url始终返回默认值/，不适合做依赖目标路由信息的前置解析逻辑。

采用根路由单次绑定CanActivate守卫的实现，完全满足所有需求：

• 仅需在最顶层根路由配置一次守卫，所有子路由（含懒加载路由）自动继承守卫逻辑，无需逐个配置
• 根路径/可正常绑定业务组件，不需要空壳组件
• 守卫执行时路由已完成解析，可直接获取完整目标URL、查询参数等信息
• 支持异步解析逻辑，等待异步逻辑执行完成后才会加载对应组件

具体实现步骤 #

• 编写全局路由守卫

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';

@Injectable({ providedIn: 'root' })
export class GlobalPreloadGuard implements CanActivate {
  canActivate(
    _route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Promise<boolean> | boolean {
    // 此处可拿到真实访问URL，例如访问/DashboardPage?p=33时，state.url为对应完整路径
    console.log('待访问路由地址：', state.url);

    // 在此处编写需要在组件加载前完成的解析逻辑，例如鉴权、全局配置加载等
    // 若为异步逻辑，返回Promise<boolean>即可，框架会等待Promise resolve后再激活路由
    return true;
  }
}

• 配置根路由，仅需在根路径挂载一次守卫，根组件正常绑定

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { GlobalPreloadGuard } from './global-preload.guard';
// 引入根路径需要绑定的业务组件
import { HomeComponent } from './pages/home/home.component';
import { DashboardComponent } from './pages/dashboard/dashboard.component';

const routes: Routes = [
  {
    path: '',
    component: HomeComponent, // 根路径正常绑定业务组件，符合需求
    canActivate: [GlobalPreloadGuard], // 仅在此处配置一次守卫，全局生效
    children: [
      // 所有子路由无需单独配置守卫，自动继承父级守卫逻辑
      { path: 'DashboardPage', component: DashboardComponent }
      // 其余业务路由、懒加载路由正常配置即可
    ]
  }
];

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

时机更早的可选方案 #

如果需要在懒加载模块的代码加载前就执行前置逻辑，可以把守卫替换为CanMatch类型，配置方式完全一致，CanMatch的执行时机早于路由模块加载，适合做模块级别的权限拦截场景。

内容的提问来源于stack exchange，提问作者firstChild