如何在Angular 4组件ngOnInit方法中读取HTTP请求令牌？

我有两个客户端应用：

• .NET Client
• Angular 4应用

在用户认证后，我会将带有认证令牌（通过HTTP_USER_ID请求头传递）的HTTP请求重定向至客户端应用URL。在页面加载时，.NET应用可以正常读取该令牌，代码如下：

var response = GetUserID(request); 
public string GetUserID(HttpRequest req) { 
    var UserID = req.ServerVariables.Get("HTTP_USER_ID"); 
    if(UserID== null) 
        return "Header not found. Invalid User"; 
    else 
        return UserID; 
}

但我无法在Angular 4组件的ngOnInit方法中获取这个请求令牌，查了很多文章都没解决，请问该怎么实现？

解决方案 #

首先得明确一个关键限制：浏览器在执行重定向操作时，不会保留原始请求中的自定义HTTP头。.NET应用能拿到HTTP_USER_ID是因为它直接处理了原始的服务器请求，而Angular是重定向后在浏览器中运行的前端代码，根本无法访问原始请求的头信息。

基于这个限制，我推荐两种可行的实现方式：

方法1：将令牌作为查询参数附加到重定向URL #

后端在触发重定向时，把UserID作为查询参数拼接到Angular应用的URL里，比如重定向到：https://your-angular-app.com?user_id=xxx

然后在Angular组件中通过ActivatedRoute获取参数：

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent implements OnInit {

  constructor(private route: ActivatedRoute) { }

  ngOnInit(): void {
    // 读取查询参数中的UserID
    const userId = this.route.snapshot.queryParamMap.get('user_id');
    
    if (userId) {
      console.log('获取到的UserID:', userId);
      // 这里可以继续处理令牌相关逻辑
    } else {
      console.error('未找到UserID参数');
    }
  }
}

⚠️ 注意：查询参数会暴露在浏览器地址栏、历史记录以及服务器日志中，如果UserID是敏感信息，这种方式需要谨慎使用。

方法2：将令牌存入Cookie（更安全的方式） #

后端在重定向之前，把UserID存入浏览器Cookie，并设置HttpOnly为false（让前端JavaScript可以读取）。.NET后端示例代码：

public IActionResult RedirectToAngular()
{
    var userId = GetUserID(Request);
    if (!string.IsNullOrEmpty(userId))
    {
        Response.Cookies.Append("UserID", userId, new CookieOptions
        {
            HttpOnly = false, // 允许前端读取
            Secure = true,    // 生产环境建议开启，仅在HTTPS下传输
            SameSite = SameSiteMode.Strict, // 降低CSRF风险
            Expires = DateTimeOffset.UtcNow.AddHours(1) // 设置合理的过期时间
        });
    }
    return Redirect("https://your-angular-app.com");
}

然后在Angular组件中读取Cookie：

原生JavaScript方式

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent implements OnInit {

  ngOnInit(): void {
    const userId = this.getCookie('UserID');
    
    if (userId) {
      console.log('获取到的UserID:', userId);
      // 处理令牌逻辑
    } else {
      console.error('未找到UserID Cookie');
    }
  }

  // 自定义解析Cookie的工具方法
  private getCookie(name: string): string | null {
    const cookieItem = document.cookie
      .split('; ')
      .find(row => row.startsWith(`${name}=`));
    
    return cookieItem ? cookieItem.split('=')[1] : null;
  }
}

使用第三方库（推荐）

如果项目中有大量Cookie操作，可以用ngx-cookie-service简化流程：

1. 安装库：npm install ngx-cookie-service
2. 在模块中导入注册：

import { CookieService } from 'ngx-cookie-service';

@NgModule({
  providers: [CookieService]
})
export class YourModule { }

3. 在组件中使用：

import { Component, OnInit } from '@angular/core';
import { CookieService } from 'ngx-cookie-service';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent implements OnInit {

  constructor(private cookieService: CookieService) { }

  ngOnInit(): void {
    const userId = this.cookieService.get('UserID');
    
    if (userId) {
      console.log('获取到的UserID:', userId);
    } else {
      console.error('未找到UserID Cookie');
    }
  }
}

额外安全建议 #

• 无论用哪种方式，都要确保令牌在HTTPS环境下传输，避免明文泄露。
• 使用Cookie时，务必开启Secure和SameSite属性，降低CSRF攻击风险。
• 如果令牌属于高度敏感信息，可以考虑让Angular通过后端代理接口间接获取令牌，避免前端直接接触敏感数据。

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