Angular跨模块共享AuthenticationGuard守卫的实现问题

我帮你捋捋这个问题哈——你遇到的情况其实是Angular注入器作用域的典型坑！为啥在启动的landing模块里注册守卫就能用，在shared或admin里不行？核心原因是Angular模块的提供者作用域规则，下面给你拆解解决方案：

最推荐的方案：让守卫成为应用级单例（不用手动在模块注册） #

直接在你的AuthenticationGuard类上用providedIn: 'root'标记，Angular会自动把它放到根注入器里，整个应用所有模块都能直接用，根本不用在任何模块的providers数组里注册，省心又不容易错！

示例代码：

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

@Injectable({
  providedIn: 'root' // 关键：指定根注入器，全局可用
})
export class AuthenticationGuard implements CanActivate {
  constructor(private router: Router) {}

  canActivate(route: ActivatedRouteSnapshot): boolean {
    // 这里写你的认证逻辑，比如检查token
    const isLoggedIn = !!localStorage.getItem('authToken');
    
    if (!isLoggedIn) {
      this.router.navigate(['/landing/login']);
      return false;
    }
    return true;
  }
}

之后不管是在landing、admin还是其他模块的路由里用这个守卫，直接引用就行，比如admin模块的路由配置：

import { Routes } from '@angular/router';
import { AuthenticationGuard } from '../shared/guards/authentication.guard';
import { AdminPanelComponent } from './admin-panel/admin-panel.component';

export const adminRoutes: Routes = [
  {
    path: '',
    component: AdminPanelComponent,
    canActivate: [AuthenticationGuard] // 直接用，不用额外注册
  }
];

如果你一定要在SharedModule里注册守卫：用forRoot()模式 #

要是你坚持要把守卫放在SharedModule里管理，就得用Angular的forRoot()模式来保证守卫是单例——因为如果直接在SharedModule的providers里加守卫，每个导入SharedModule的模块（比如admin）都会创建一个新的守卫实例，导致作用域混乱，要么找不到实例要么逻辑冲突。

步骤如下：

1. 改造SharedModule，添加forRoot()静态方法 #

import { NgModule, ModuleWithProviders } from '@angular/core';
import { CommonModule } from '@angular/common';
import { AuthenticationGuard } from './guards/authentication.guard';

@NgModule({
  imports: [CommonModule],
  // 注意：这里不要在@NgModule的providers里加守卫！
  declarations: [] // 你的Shared组件、指令等放在这
})
export class SharedModule {
  // 用forRoot()提供全局单例的守卫/服务
  static forRoot(): ModuleWithProviders<SharedModule> {
    return {
      ngModule: SharedModule,
      providers: [AuthenticationGuard]
    };
  }
}

2. 根模块（LandingModule）导入SharedModule.forRoot() #

只有启动的根模块能调用forRoot()，确保守卫只在根注入器注册一次：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { SharedModule } from './shared/shared.module';
import { LandingRoutingModule } from './landing-routing.module';

@NgModule({
  imports: [
    BrowserModule,
    SharedModule.forRoot(), // 根模块用forRoot()
    LandingRoutingModule
  ],
  declarations: []
})
export class LandingModule { }

3. 其他特性模块（比如AdminModule）导入普通的SharedModule #

admin模块只需要导入不带forRoot()的SharedModule，就能使用守卫，而且不会创建新实例：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SharedModule } from '../shared/shared.module';
import { AdminRoutingModule } from './admin-routing.module';

@NgModule({
  imports: [
    CommonModule,
    SharedModule, // 特性模块只导入基础SharedModule
    AdminRoutingModule
  ],
  declarations: []
})
export class AdminModule { }

为啥之前的做法无效？ #

• 直接在SharedModule的providers里加守卫：每个导入SharedModule的模块都会复制一份提供者，导致守卫有多个实例，路由系统找不到正确的那个，甚至出现逻辑冲突。
• 在AdminModule的providers里注册：Admin如果是懒加载模块，它的注入器是子注入器，根路由或其他模块的路由调用守卫时，根注入器找不到这个实例，直接报错。

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