会话过期致Angular Chunk下载失败，求拦截并重载页面方案（不可改服务器）

这个场景我之前也遇到过，确实挺头疼的——会话过期后反向代理把所有请求都重定向到登录页，而Angular加载chunk时会把登录页的HTML当成JS解析，直接崩掉。既然不能改服务器配置，我们可以从Angular客户端层面做拦截处理，分两种情况来覆盖：

1. 拦截HttpClient请求的重定向 #

首先，我们可以通过Angular的HttpInterceptor来拦截所有通过HttpClient发起的请求，检查响应是否是指向登录页的302重定向。如果是，直接重载页面让用户重新登录。

实现步骤： #

• 创建一个拦截器类：

import { Injectable } from '@angular/core';
import {
  HttpRequest,
  HttpHandler,
  HttpInterceptor,
  HttpErrorResponse
} from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { catchError } from 'rxjs/operators';

@Injectable()
export class SessionExpiryInterceptor implements HttpInterceptor {
  // 替换成你的实际登录页路径，比如'/account/login'
  private loginPath = '/login';

  intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<unknown> {
    return next.handle(request).pipe(
      catchError((error: HttpErrorResponse) => {
        // 检查是否是重定向到登录页的情况
        if (error.status === 302 && error.headers.get('location')?.includes(this.loginPath)) {
          // 重载整个页面
          window.location.reload();
        }
        return throwError(() => error);
      })
    );
  }
}

• 在AppModule里注册这个拦截器：

import { NgModule } from '@angular/core';
import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { SessionExpiryInterceptor } from './session-expiry.interceptor';

@NgModule({
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: SessionExpiryInterceptor,
      multi: true
    }
  ]
})
export class AppModule { }

2. 处理Chunk加载的错误（关键！） #

上面的拦截器只能处理HttpClient的请求，但Angular加载chunk是通过动态创建script标签来加载的，这类请求不会经过HttpClient，所以我们需要监听全局的script加载错误，判断是否是因为会话过期导致的。

实现步骤： #

• 在AppComponent的ngOnInit里添加全局错误监听：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  // 替换成你的实际登录页路径
  private loginPath = '/login';

  ngOnInit(): void {
    // 使用捕获阶段监听全局script加载错误
    window.addEventListener('error', (event) => {
      const target = event.target as HTMLScriptElement;
      // 检查是否是chunk加载请求（根据你的chunk命名规则调整，比如默认是'chunk-'开头）
      if (target.src.includes('chunk-')) {
        // 发请求验证是否真的会话过期
        fetch('/')
          .then(response => {
            if (response.redirected && response.url.includes(this.loginPath)) {
              window.location.reload();
            }
          })
          .catch(() => {
            // 请求失败时默认重载，避免页面卡死
            window.location.reload();
          });
      }
    }, true);
  }
}

补充说明 #

• 请务必替换代码里的loginPath为你项目实际的登录页路径
• 第二种方案里的fetch('/')是为了避免误判——比如网络波动导致的chunk加载失败，我们只在确认会话过期时才重载页面
• 如果你的chunk命名规则不是chunk-开头，可以根据实际情况修改target.src.includes('chunk-')的判断条件

这样就能覆盖两种核心场景：普通API请求的重定向，以及chunk加载时的会话过期问题，一旦触发就自动重载页面，让用户回到登录页重新登录。

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