如何在Angular应用实例创建时执行认证服务（不受初始路由影响）

嘿，这个需求其实在Angular里有几种很靠谱的实现方式，我给你拆解一下最常用的两种，保证不管用户打开哪个初始路由（不管是根路由还是/totally/awesome/route/point这类深层路由），都能触发认证逻辑：

方法一：使用APP_INITIALIZER（推荐用于启动时的一次性检查） #

APP_INITIALIZER是Angular提供的初始化钩子，它会在应用启动、渲染任何组件之前执行指定的逻辑，完全符合你“应用实例创建时运行”的需求。而且它支持异步操作，Angular会等待异步任务完成后才继续加载应用，避免未认证用户看到受保护内容。

步骤1：实现认证服务 #

先创建一个包含认证检查逻辑的服务，核心是写一个检查localStorage中JWT并从服务器获取权限的方法：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable, of } from 'rxjs';
import { tap, catchError } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class AuthService {
  private isAuthenticated = false;
  private userPermissions: string[] = [];

  constructor(private http: HttpClient) {}

  // 核心方法：检查JWT并获取用户权限
  checkAuthStatus(): Observable<boolean> {
    const jwtToken = localStorage.getItem('jwt');
    
    // 没有token直接标记未认证
    if (!jwtToken) {
      this.isAuthenticated = false;
      return of(false);
    }

    // 向服务器验证token并拉取权限信息
    return this.http.get<{ permissions: string[] }>('/api/auth/verify-token')
      .pipe(
        tap(response => {
          this.isAuthenticated = true;
          this.userPermissions = response.permissions;
        }),
        catchError(() => {
          // token无效时清除本地存储，标记未认证
          localStorage.removeItem('jwt');
          this.isAuthenticated = false;
          return of(false);
        })
      );
  }

  // 辅助方法：对外暴露认证状态和权限
  getIsAuthenticated(): boolean {
    return this.isAuthenticated;
  }

  getUserPermissions(): string[] {
    return [...this.userPermissions]; // 返回副本避免外部修改
  }
}

步骤2：配置APP_INITIALIZER #

在AppModule中注册APP_INITIALIZER，把认证服务的检查方法绑定进去：

import { NgModule, APP_INITIALIZER } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { AuthService } from './auth.service';

// 初始化函数：返回Promise让Angular等待认证检查完成
function initializeAuth(authService: AuthService) {
  return () => authService.checkAuthStatus().toPromise();
}

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, HttpClientModule, AppRoutingModule],
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: initializeAuth,
      deps: [AuthService], // 注入依赖的AuthService
      multi: true // 允许多个初始化器
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

这样配置后，不管用户打开哪个初始路由，Angular都会先执行checkAuthStatus()方法，完成认证检查后才会渲染页面。

方法二：结合路由守卫（用于后续路由跳转的保障） #

如果想要在每次路由跳转时也能检查认证状态（比如用户手动修改localStorage或token过期的情况），可以搭配路由守卫CanActivate使用，作为APP_INITIALIZER的补充：

步骤1：实现路由守卫 #

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';
import { AuthService } from './auth.service';

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate {
  constructor(private authService: AuthService, private router: Router) {}

  canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): boolean {
    const isAuth = this.authService.getIsAuthenticated();
    if (!isAuth) {
      // 未认证时跳转到登录页
      this.router.navigate(['/login']);
    }
    return isAuth;
  }
}

步骤2：在路由配置中使用守卫 #

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AwesomeComponent } from './awesome/awesome.component';
import { LoginComponent } from './login/login.component';
import { AuthGuard } from './auth.guard';

const routes: Routes = [
  { path: '', component: HomeComponent, canActivate: [AuthGuard] },
  { path: 'totally/awesome/route/point', component: AwesomeComponent, canActivate: [AuthGuard] },
  { path: 'login', component: LoginComponent } // 登录页不需要守卫
];

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

总结 #

• APP_INITIALIZER负责应用启动时的一次性认证检查，确保不管初始路由是什么，都会先运行你的认证服务逻辑；
• 路由守卫负责后续路由跳转时的权限校验，避免未认证用户访问受保护页面；
• 两者结合可以完美覆盖你的需求，同时因为你已经做好了XSS防护，localStorage存储JWT的方案是安全的。

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