Angular服务请求根据登录用户动态切换Server1/Server2的最优实现方案

1. 更新环境配置文件 #

先把两个服务器的端点都配置到环境文件中，避免硬编码：

export const environment = {
  production: false,
  envName: 'dev',
  apiEndpoints: {
    server1: 'https://url.to.server1/api/',
    server2: 'https://url.to.server2/api/'
  }
};

2. 封装API端点管理服务 #

创建一个全局服务，专门负责存储、读取用户所属服务器的API端点，同时做持久化处理（避免页面刷新后丢失配置）：

import { Injectable } from '@angular/core';
import { environment } from '../environments/environment';

@Injectable({ providedIn: 'root' })
export class ApiEndpointService {
  private currentEndpoint: string;
  private readonly STORAGE_KEY = 'user-linked-api-endpoint';

  constructor() {
    // 初始化时优先读取本地存储的历史配置，默认用server1
    const savedEndpoint = localStorage.getItem(this.STORAGE_KEY);
    this.currentEndpoint = savedEndpoint || environment.apiEndpoints.server1;
  }

  // 设置并持久化当前使用的端点
  setCurrentEndpoint(endpoint: string): void {
    this.currentEndpoint = endpoint;
    localStorage.setItem(this.STORAGE_KEY, endpoint);
  }

  // 获取当前要使用的API端点
  getCurrentEndpoint(): string {
    return this.currentEndpoint;
  }

  // 获取所有可用服务器的端点列表（供登录验证使用）
  getAllAvailableEndpoints(): string[] {
    return Object.values(environment.apiEndpoints);
  }
}

3. 改造登录验证逻辑 #

在登录服务里依次尝试两个服务器的验证接口，验证成功后记录用户所属服务器的端点：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable, catchError, switchMap, of } from 'rxjs';
import { ApiEndpointService } from './api-endpoint.service';

@Injectable({ providedIn: 'root' })
export class AuthService {
  constructor(
    private http: HttpClient,
    private apiEndpointService: ApiEndpointService
  ) {}

  login(username: string, password: string): Observable<boolean> {
    const endpoints = this.apiEndpointService.getAllAvailableEndpoints();
    
    // 递归尝试每个服务器的登录接口
    const attemptLogin = (index: number): Observable<boolean> => {
      if (index >= endpoints.length) {
        // 所有服务器验证失败
        return of(false);
      }
      const targetEndpoint = endpoints[index];
      return this.http.post(`${targetEndpoint}auth/login`, { username, password })
        .pipe(
          switchMap(() => {
            // 验证成功，保存当前服务器端点
            this.apiEndpointService.setCurrentEndpoint(targetEndpoint);
            return of(true);
          }),
          catchError(() => {
            // 当前服务器验证失败，尝试下一个
            return attemptLogin(index + 1);
          })
        );
    };

    return attemptLogin(0);
  }
}

4. 改造业务服务的API调用方式 #

所有业务服务不再直接使用固定的环境变量端点，而是通过ApiEndpointService获取当前用户对应的服务器地址：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { ApiEndpointService } from './api-endpoint.service';

@Injectable({ providedIn: 'root' })
export class ModuleService {
  constructor(
    private httpClient: HttpClient,
    private apiEndpointService: ApiEndpointService
  ) {}

  myServiceMethod1(param: any): Observable<Array<any>> {
    const currentEndpoint = this.apiEndpointService.getCurrentEndpoint();
    return this.httpClient.get(`${currentEndpoint}rest/service/url/...`);
  }
}

额外优化建议 #

• 登录失败判断可以细化：只在后端返回「用户不存在」的特定错误码（比如404/401）时切换服务器，避免因网络波动误切换
• 用户退出登录时，清除本地存储的端点记录，下次登录重新验证
• 可以在ApiEndpointService中加入端点有效性校验，防止存储无效地址

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