Angular 5（IIS部署）SSO认证后重定向请求头拦截技术问询

嘿，针对你的Angular 5 + IIS + SSO场景，要捕获跳转回首页时的HTTP请求头信息，这里分两种情况给你具体解决方案，毕竟得先搞清楚你要抓的是哪类请求的头～

如果是首页加载后，Angular通过HttpClient调用后端API时的请求头，那HttpInterceptor完全能搞定，步骤如下：

1. 创建拦截器服务 #

新建一个拦截器文件，比如auth-header.interceptor.ts，实现HttpInterceptor接口：

import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';

@Injectable()
export class AuthHeaderInterceptor implements HttpInterceptor {
  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    // 可根据请求URL筛选，只拦截首页相关的请求（比如首页加载时调用的API）
    if (request.url.includes('/api/home')) {
      // 获取你需要的头信息，比如认证头或自定义头
      const authHeader = request.headers.get('Authorization');
      const customHeader = request.headers.get('X-Custom-Header');
      
      // 将捕获到的头信息存到需要的地方：服务、localStorage或sessionStorage都可以
      console.log('捕获到的认证头:', authHeader);
      console.log('捕获到的自定义头:', customHeader);
      localStorage.setItem('authHeader', authHeader);
    }

    // 必须把请求继续传递，否则请求会被拦截中断
    return next.handle(request);
  }
}

2. 在模块中注册拦截器 #

在根模块（比如AppModule）的providers数组里注册这个拦截器：

import { NgModule } from '@angular/core';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { AuthHeaderInterceptor } from './auth-header.interceptor';

@NgModule({
  imports: [HttpClientModule], // 注意用HttpClientModule，而非旧版HttpModule
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: AuthHeaderInterceptor,
      multi: true // 允许多个拦截器共存
    }
  ]
})
export class AppModule { }

如果是用户从SSO跳转回来时，浏览器向IIS请求index.html的初始HTTP请求头，Angular的HttpInterceptor是抓不到的——因为这时候Angular还没初始化！这时候得靠IIS配合把需要的头信息传递给前端：

方法1：通过IIS把请求头写入Cookie #

在IIS里配置URL重写规则，把目标请求头写入Cookie，再让Angular读取：

1. 打开IIS管理器，找到你的站点，进入「URL重写」
2. 添加出站规则：
   • 规则名称：比如CopyAuthHeaderToCookie
   • 匹配条件：选择「请求头」，输入你要捕获的头名称（比如Authorization）
   • 操作：选择「设置Cookie」，Cookie名称设为AuthHeader，值设为{HTTP_AUTHORIZATION}（IIS服务器变量）
3. 在Angular的AppComponent的ngOnInit里读取Cookie：

ngOnInit() {
  const authHeader = this.getCookie('AuthHeader');
  if (authHeader) {
    console.log('从Cookie获取的初始请求头:', authHeader);
    // 存到需要的位置
  }
}

private getCookie(name: string): string {
  const value = "; " + document.cookie;
  const parts = value.split("; " + name + "=");
  if (parts.length === 2) return parts.pop().split(";").shift();
  return null;
}

方法2：通过IIS在index.html中注入头信息 #

让IIS在返回index.html时，把请求头的值注入到页面全局变量：

1. 在index.html中添加一段脚本，用IIS服务器变量填充值：

   <script>
     window.authHeader = '<%= Request.Headers["Authorization"] %>';
   </script>
   

2. Angular应用启动后直接读取全局变量：

ngOnInit() {
  const authHeader = (window as any).authHeader;
  if (authHeader) {
    console.log('从页面全局变量获取的初始请求头:', authHeader);
  }
}

• 确保IIS允许你需要的头信息传递，比如自定义头需在CORS配置中添加允许项
• Angular 5的HttpInterceptor依赖@angular/common/http，务必导入HttpClientModule
• 若捕获初始请求头，注意敏感信息的安全性，避免泄露

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