Angular 5应用维护模式实现咨询：拦截请求跳转至维护页

刚好我之前做过类似的跨服务器部署场景，给你分享一套完整的实现方案，完美适配你Angular 5 + Spring REST的全局维护模式需求👇

1. 维护状态配置文件（无需打包即可开关） #

先在Angular项目的assets目录下创建一个maintenance-config.json，用来存储维护模式的开关和提示信息：

{
  "maintenanceMode": false,
  "maintenanceMessage": "系统正在维护中，请稍后再试"
}

优势：运维人员只需要修改这个JSON文件的maintenanceMode字段为true/false，就能随时开启/关闭维护模式，完全不需要重新打包Angular应用。

2. 封装AppConfig服务加载配置 #

把你提到的启动加载逻辑封装成可注入的服务，统一管理维护状态：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class AppConfigService {
  private config: any;

  constructor(private http: HttpClient) {}

  // 启动时加载配置文件
  loadConfig() {
    return this.http.get('/assets/maintenance-config.json')
      .toPromise()
      .then(config => {
        this.config = config;
      });
  }

  // 判断是否处于维护模式
  isMaintenanceMode(): boolean {
    return this.config?.maintenanceMode || false;
  }

  // 获取维护提示信息
  getMaintenanceMessage(): string {
    return this.config?.maintenanceMessage || '系统维护中';
  }
}

3. 启动时预加载配置 #

修改app.module.ts，利用APP_INITIALIZER确保Angular启动前先加载维护配置：

import { NgModule, APP_INITIALIZER } from '@angular/core';
import { AppConfigService } from './app-config.service';

// 定义初始化函数，等待配置加载完成
export function initializeApp(appConfigService: AppConfigService) {
  return () => appConfigService.loadConfig();
}

@NgModule({
  // ...你的其他模块导入
  providers: [
    AppConfigService,
    {
      provide: APP_INITIALIZER,
      useFactory: initializeApp,
      deps: [AppConfigService],
      multi: true
    }
  ]
})
export class AppModule { }

4. 全局路由拦截（跳转维护页面） #

创建路由守卫MaintenanceGuard，拦截所有业务路由的跳转：

import { Injectable } from '@angular/core';
import { CanActivate, Router, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { AppConfigService } from './app-config.service';

@Injectable({
  providedIn: 'root'
})
export class MaintenanceGuard implements CanActivate {
  constructor(private appConfig: AppConfigService, private router: Router) {}

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    if (this.appConfig.isMaintenanceMode()) {
      // 维护模式下跳转到专属页面
      this.router.navigate(['/maintenance']);
      return false;
    }
    return true;
  }
}

然后在路由配置中给所有业务路由添加这个守卫：

import { Routes, RouterModule } from '@angular/router';
import { MaintenanceGuard } from './maintenance.guard';
import { MaintenanceComponent } from './maintenance/maintenance.component';
// 导入你的其他业务组件

const routes: Routes = [
  // 维护页面不需要拦截
  { path: 'maintenance', component: MaintenanceComponent },
  // 所有业务路由添加守卫
  { path: 'home', component: HomeComponent, canActivate: [MaintenanceGuard] },
  { path: 'dashboard', component: DashboardComponent, canActivate: [MaintenanceGuard] },
  // 404路由也需要拦截
  { path: '**', redirectTo: 'home', canActivate: [MaintenanceGuard] }
];

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

5. 维护页面组件 #

创建一个简单的维护页面，展示配置中的提示信息：

<div class="maintenance-page">
  <h1>🔧 系统维护中</h1>
  <p>{{ maintenanceMessage }}</p>
</div>

import { Component, OnInit } from '@angular/core';
import { AppConfigService } from '../app-config.service';

@Component({
  selector: 'app-maintenance',
  templateUrl: './maintenance.component.html',
  styleUrls: ['./maintenance.component.css']
})
export class MaintenanceComponent implements OnInit {
  maintenanceMessage: string;

  constructor(private appConfig: AppConfigService) {}

  ngOnInit() {
    this.maintenanceMessage = this.appConfig.getMaintenanceMessage();
  }
}

6. 额外优化：拦截HTTP请求 #

除了路由拦截，还要拦截所有向Spring REST服务发送的HTTP请求，避免无效请求：

import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { AppConfigService } from './app-config.service';
import { Router } from '@angular/router';

@Injectable()
export class MaintenanceInterceptor implements HttpInterceptor {
  constructor(private appConfig: AppConfigService, private router: Router) {}

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    if (this.appConfig.isMaintenanceMode()) {
      this.router.navigate(['/maintenance']);
      return throwError(() => new Error('系统维护中，无法处理请求'));
    }
    return next.handle(req);
  }
}

在app.module.ts中注册这个拦截器：

import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { MaintenanceInterceptor } from './maintenance.interceptor';

@NgModule({
  // ...其他配置
  providers: [
    // ...其他提供者
    {
      provide: HTTP_INTERCEPTORS,
      useClass: MaintenanceInterceptor,
      multi: true
    }
  ]
})
export class AppModule { }

这套方案实现了：

• 启动时加载维护配置，确保状态全局一致
• 拦截所有路由跳转和HTTP请求，强制跳转到维护页面
• 无需重新打包即可开关维护模式，适配跨服务器部署场景

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