Angular应用中如何发起HTTP 302重定向详解

Angular Universal SSR 依赖注入实战：Express 响应对象代码示例

import { RESPONSE } from '@nguniversal/express-engine/tokens'
import { Response } from 'express'
...
constructor(protected @Optional() @Inject(RESPONSE) serverResponse: Response) {}
...
// for example:
this.serverResponse?.status(302);

这段代码虽然简洁，却涉及 Angular 框架依赖注入机制与 Angular Universal 服务端渲染（SSR）的关键细节。下面我们将深入解析其原理与用法。

源码深度解析：RESPONSE 令牌与依赖注入流程

首先看到两个关键的导入语句：

• RESPONSE 令牌来源于 @nguniversal/express-engine/tokens，这是 Angular Universal 专为服务端渲染设计的注入令牌。
• Response 类型来自 express 模块，代表 Node.js 标准 HTTP 响应对象。

两者结合使用，目标清晰：在服务端渲染环境下获取 Express 框架的原生响应对象，从而实现对 HTTP 响应的直接控制。

下一步分析构造函数，它采用了 Angular 经典的依赖注入模式。@Optional() 装饰器声明该依赖为可选——若当前运行环境非服务端或 Universal 配置不完整，注入也不会抛出异常。而 @Inject(RESPONSE) 则明确指示 Angular 注入器提供 RESPONSE 令牌对应的实例。如此，我们便能在类中通过 serverResponse 变量直接操作 HTTP 响应对象。

示例代码展示了最简用法：通过 status(302) 设置 HTTP 302 重定向状态码。这里使用了可选链操作符 ?.，确保当 serverResponse 为 null 或 undefined 时不会抛出错误，这是 JavaScript/TypeScript 的现代化写法。

综上所述，这段代码的核心价值在于：使 Angular 应用在服务端渲染阶段获得直接操控 HTTP 响应的能力——包括设置状态码、自定义响应头，甚至触发重定向等操作。

实战案例：Angular SSR 过程中完整控制 HTTP 响应与重定向

实际应用场景通常比单行状态码复杂得多。以下示例演示了如何在完整的服务端处理器中，沿用相同的依赖注入方式执行一系列操作：

import { RESPONSE } from '@nguniversal/express-engine/tokens';
import { Response } from 'express';
import { Injectable, Optional, Inject } from '@angular/core';
@Injectable()
export class ServerResponseHandler {
  constructor(protected @Optional() @Inject(RESPONSE) serverResponse: Response) {}
  handleResponse(): void {
    // 设置状态码为302
    this.serverResponse?.status(302);
    // 设置响应头
    this.serverResponse?.set('Cache-Control', 'public, max-age=300');
    // 发送响应
    this.serverResponse?.send('Redirecting...');
  }
}

在 ServerResponseHandler 类中，我们定义了 handleResponse 方法，依次调用 status、set 和 send 方法，完整展现了服务端重定向流程。其中设置 Cache-Control 响应头的功能，在需要精细化控制 SSR 缓存策略的场景下尤为实用。

以上就是通过 Angular 依赖注入实现 HTTP 302 重定向的完整指南。关键在于掌握 RESPONSE 令牌的作用及其注入时机——仅当服务端渲染阶段才可用。理解这一机制后，扩展其他响应操作（如设置缓存头、返回 JSON 数据等）将变得轻而易举。