Angular 4内网应用初始化时如何获取请求头用户名并存储

嘿，这个场景我之前帮团队处理过，Angular 4里要在应用初始化阶段拿到请求头里的用户名，得根据实际情况分两种方式来实现，我给你详细拆解：

情况1：用户名头存在于加载Angular应用的初始请求中 #

如果第三方软件是在加载你的index.html的HTTP请求里注入了用户名头，那前端没法直接通过JS读取当前页面的请求头，得靠后端配合：

• 让后端把请求头里的用户名值，嵌入到index.html的全局变量中，比如在index.html的<head>里加一段脚本：

  <script>
    window.globalUserName = '${后端从请求头提取的用户名}';
  </script>
  

• 接着创建一个UserService来存储并提供用户名：

  @Injectable()
  export class UserService {
    public userName: string;
  
    constructor() {
      // 读取全局变量，类型断言避免TS报错
      this.userName = (window as any).globalUserName;
    }
  }
  

• 最后把UserService添加到AppModule的providers数组里，整个应用就能通过注入这个服务来获取用户名了。

情况2：需要发起初始化请求获取带用户名的请求头 #

如果第三方软件会给前端发起的API请求自动注入用户名头，那可以用Angular的APP_INITIALIZER令牌——它能让你在应用启动前执行异步操作，确保用户名获取完成后再加载应用：

步骤1：创建初始化服务 #

import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http'; // Angular 4.3+ 也可以用HttpClient
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/toPromise';

@Injectable()
export class AppInitService {
  private storedUserName: string;

  constructor(private http: Http) {}

  // 初始化方法：发起请求并提取请求头中的用户名
  init(): Promise<string> {
    // 这里的接口可以是任意后端接口，只要第三方会给它加用户名头
    return this.http.get('/api/init-user-check', { observe: 'response' })
      .map((response: Response) => {
        // 替换成你实际的用户名头Key，比如X-Company-Username
        this.storedUserName = response.headers.get('X-User-Name');
        return this.storedUserName;
      })
      .toPromise()
      .catch(err => {
        // 处理请求失败的情况，比如设置默认值或终止应用启动
        console.error('Failed to fetch user name from header', err);
        return Promise.resolve('default-user'); // 根据业务调整
      });
  }

  // 提供给其他服务/组件获取用户名的方法
  getUserName(): string {
    return this.storedUserName;
  }
}

步骤2：配置APP_INITIALIZER #

在AppModule里注册初始化逻辑，让Angular在启动前执行：

import { NgModule, APP_INITIALIZER } from '@angular/core';
import { HttpModule } from '@angular/http';
import { AppInitService } from './app-init.service';
import { UserService } from './user.service';

// 初始化工厂函数
export function appInitFactory(initService: AppInitService) {
  return () => initService.init();
}

@NgModule({
  imports: [HttpModule],
  providers: [
    AppInitService,
    UserService,
    {
      provide: APP_INITIALIZER,
      useFactory: appInitFactory,
      deps: [AppInitService],
      multi: true // 允许多个初始化器
    }
  ]
})
export class AppModule {}

步骤3：在其他服务中使用 #

比如在UserService里注入AppInitService来获取用户名：

@Injectable()
export class UserService {
  public userName: string;

  constructor(private appInitService: AppInitService) {
    this.userName = appInitService.getUserName();
  }
}

注意事项 #

• 确保请求头的Key和第三方软件设置的完全一致，大小写敏感！
• 如果用Angular 4.3及以上版本，推荐使用HttpClient替代Http，语法差异不大，主要是导入路径变成@angular/common/http。
• 内网环境下一般不存在跨域问题，但如果有特殊配置，要确保请求能正常发送。

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