Angular 5中如何获取HTTP请求头信息与URL查询参数？

嘿，刚好我之前在Angular 5项目里处理过类似的认证场景，来帮你解答这两个问题：

首先得明确一个关键点：如果是第三方认证后重定向到你的Angular应用时携带的请求头，浏览器出于安全机制，在重定向过程中是不会保留这些请求头的。这种情况下，客户端的Angular代码没办法直接拿到这些头信息，你得通过后端服务中转：让后端接收第三方的重定向请求，提取出需要的请求头内容，再通过URL查询参数、Cookie，或者把信息注入到页面的全局变量里，传递给Angular应用。

如果是Angular应用内部通过HttpClient发起请求后，要获取响应的请求头，可以这么做：

• 第一步要确保后端配置了Access-Control-Expose-Headers响应头，指定允许前端访问的头字段（不然浏览器会限制前端获取某些非默认的响应头）
• 然后在请求时设置observe: 'response'来获取完整的响应对象，进而拿到头信息：

import { HttpClient, HttpResponse } from '@angular/common/http';

constructor(private http: HttpClient) {}

fetchResource() {
  this.http.get('/api/your-resource', { observe: 'response' })
    .subscribe((response: HttpResponse<any>) => {
      // 获取单个指定头信息
      const authToken = response.headers.get('Authorization');
      // 遍历获取所有头信息
      const allHeaders = response.headers.keys().map(key => ({
        key,
        value: response.headers.get(key)
      }));
      
      console.log('Authorization Token:', authToken);
      console.log('All Response Headers:', allHeaders);
    });
}

Angular 5的路由模块提供了ActivatedRoute服务，能非常方便地获取URL里的查询参数，步骤如下：

1. 先在组件里导入ActivatedRoute：

import { ActivatedRoute } from '@angular/router';

2. 通过构造函数注入这个服务：

constructor(private route: ActivatedRoute) {}

3. 有两种获取方式，根据你的场景选择：

• 一次性获取当前查询参数（适合组件初始化时获取固定参数）：

ngOnInit() {
  // 获取单个参数值
  const authCode = this.route.snapshot.queryParamMap.get('code');
  // 获取所有查询参数的集合
  const allQueryParams = this.route.snapshot.queryParamMap;
  
  console.log('Auth Code:', authCode);
  console.log('All Query Params:', allQueryParams);
}

• 监听查询参数变化（适合组件被复用、参数动态变化的场景）：

ngOnInit() {
  this.route.queryParamMap.subscribe(params => {
    const authCode = params.get('code');
    console.log('Updated Auth Code:', authCode);
  });
}

如果你不想依赖Angular的路由服务，也可以用原生JavaScript的方式直接获取：

const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);
const authCode = urlParams.get('code');

不过更推荐用ActivatedRoute，它和Angular的路由系统深度集成，在路由守卫、懒加载等复杂场景下表现更稳定。

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