Angular 18中如何在SSR与客户端运行时无缝获取客户端IP地址

你的思路完全正确——利用Angular 18的独立配置体系，分别在客户端和服务端通过ValueProvider（结合useFactory实现动态逻辑）提供IP地址，无需手动判断运行平台，就能实现环境适配。以下是具体的落地实现：

1. 定义类型安全的注入令牌 #

首先创建一个共享的注入令牌文件（比如src/app/core/tokens/ip.tokens.ts），用InjectionToken替代字符串标识，避免拼写错误并获得类型支持：

import { InjectionToken } from '@angular/core';

export const CLIENT_IP_ADDRESS = new InjectionToken<string>('客户端IP地址');

2. 客户端配置（app.config.ts） #

客户端无法直接读取本地IP，需通过公开IP查询API获取。这里结合APP_INITIALIZER在应用初始化时预加载IP，确保注入时能直接拿到结果：

import { ApplicationConfig, APP_INITIALIZER } from '@angular/core';
import { provideZoneChangeDetection } from '@angular/core';
import { provideRouter, withInMemoryScrolling, withPreloading, PreloadAllModules } from '@angular/router';
import { provideGoogleAnalytics } from '@angular/fire/analytics';
import { routes } from './app.routes';
import { environment } from '../environments/environment';
import { CLIENT_IP_ADDRESS } from './core/tokens/ip.tokens';

// 存储预加载的客户端IP
let clientIp: string = 'unknown';

// 异步获取客户端IP的逻辑
const loadClientIp = async () => {
  try {
    // 使用ipify的公开API，也可替换为其他可靠服务
    const response = await fetch('https://api.ipify.org');
    clientIp = await response.text();
  } catch (err) {
    console.error('获取客户端IP失败:', err);
  }
};

export const appConfig: ApplicationConfig = {
  providers: [
    provideZoneChangeDetection({ eventCoalescing: true }),
    provideRouter(
      routes,
      withPreloading(PreloadAllModules),
      withInMemoryScrolling({
        scrollPositionRestoration: 'top',
        anchorScrolling: 'enabled',
      })
    ),
    provideGoogleAnalytics(environment.googleTagId),
    // 注册APP_INITIALIZER，在应用启动前加载IP
    {
      provide: APP_INITIALIZER,
      useFactory: () => loadClientIp,
      multi: true
    },
    // 提供客户端IP的注入令牌
    {
      provide: CLIENT_IP_ADDRESS,
      useFactory: () => clientIp
    }
  ],
};

3. 服务端配置（app.config.server.ts） #

服务端可直接从请求头中提取客户端IP（需考虑反向代理场景，优先读取x-forwarded-for或x-real-ip）：

import { mergeApplicationConfig, ApplicationConfig } from '@angular/core';
import { provideServerRendering } from '@angular/platform-server';
import { appConfig } from './app.config';
import { CLIENT_IP_ADDRESS } from './core/tokens/ip.tokens';
import { REQUEST } from '@angular/platform-server';

const serverConfig: ApplicationConfig = {
  providers: [
    provideServerRendering(),
    // 服务端获取IP的逻辑
    {
      provide: CLIENT_IP_ADDRESS,
      useFactory: (request: Request) => {
        // 优先取反向代理传递的IP，再取直接连接的IP
        const ip = request.headers.get('x-forwarded-for') 
          || request.headers.get('x-real-ip') 
          || (request as any).socket.remoteAddress;
        
        // 本地开发环境的IPv6地址转换为IPv4格式
        return ip === '::1' ? '127.0.0.1' : ip;
      },
      deps: [REQUEST]
    }
  ],
};

export const config = mergeApplicationConfig(appConfig, serverConfig);

4. 在组件/服务中使用IP #

直接注入CLIENT_IP_ADDRESS即可，无需关心当前运行环境：

import { Component, Inject } from '@angular/core';
import { CLIENT_IP_ADDRESS } from './core/tokens/ip.tokens';

@Component({
  selector: 'app-root',
  template: `<h2>你的IP地址：{{ clientIp }}</h2>`
})
export class AppComponent {
  constructor(@Inject(CLIENT_IP_ADDRESS) public clientIp: string) {}
}

关键优势 #

• 无需手动判断平台：Angular会根据运行环境自动加载对应配置，代码中无冗余的平台判断逻辑
• 类型安全：使用InjectionToken替代字符串标识，减少潜在错误
• 初始化预加载：客户端通过APP_INITIALIZER确保IP在应用启动时就绪，避免异步获取的时序问题
• 服务端适配反向代理：兼容Nginx、Cloudflare等反向代理场景的IP传递

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