如何在Angular中通过gRPC-web向gRPC服务传递HTTP请求头

核心逻辑 #

gRPC-web请求的元数据会被Kong的gRPC-web插件直接转换为HTTP/2请求头，所以只需要在Angular端把SSO令牌注入到gRPC请求的元数据中，就能传递给后端gRPC服务。

具体实现步骤 #

1. 封装令牌获取服务 #

在Angular中写一个简单服务，从SSO的存储位置（比如localStorage、sessionStorage或认证服务）获取JWT令牌：

import { Injectable } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class TokenService {
  getAuthToken(): string | null {
    // 根据你的SSO实现调整，比如从localStorage取
    return localStorage.getItem('access_token');
    // 如果用Auth0等第三方库，可替换为对应令牌获取方法
  }
}

2. 实现gRPC请求拦截器 #

用grpc-web的拦截器，在每个gRPC请求发送前注入Authorization元数据：

import { Injectable } from '@angular/core';
import { TokenService } from './token.service';
import { grpc } from '@improbable-eng/grpc-web';

@Injectable({ providedIn: 'root' })
export class GrpcAuthInterceptor implements grpc.Interceptor {
  constructor(private tokenService: TokenService) {}

  intercept(request: grpc.InterceptorRequest, invoker: grpc.Invoker): grpc.InterceptorResponse {
    const token = this.tokenService.getAuthToken();
    if (token) {
      // 给请求元数据添加Authorization字段，格式和后端要求一致
      request.metadata = {
        ...request.metadata,
        'Authorization': `Bearer ${token}`
      };
    }
    return invoker(request);
  }
}

3. 给gRPC客户端绑定拦截器 #

生成gRPC-web客户端代码后，创建实例时传入拦截器：

import { YourGrpcServiceClient } from './proto/your_service_pb_service';
import { GrpcAuthInterceptor } from './grpc-auth.interceptor';

// 替换为你的Kong代理地址
const client = new YourGrpcServiceClient('https://your-kong-proxy-domain', {
  interceptors: [new GrpcAuthInterceptor()]
});

4. 配置Kong gRPC-web插件 #

确保Kong插件允许传递Authorization头，通过Admin API更新插件配置：

curl -X PATCH http://your-kong-admin-url/plugins/{plugin-id} \
  --data "config.allow_headers=Authorization,Content-Type"

关键注意点 #

• 元数据与HTTP头映射：gRPC-web的元数据键名会直接转为HTTP/2请求头，要和后端gRPC服务读取的键名一致（比如Authorization）。
• 令牌存储安全：尽量避免用localStorage存令牌（易遭XSS攻击），优先用HttpOnly Cookie配合Angular的HTTP拦截器获取。
• 全局生效：如果所有gRPC请求都要带令牌，可以把拦截器配置为全局服务，不用每个客户端单独绑定。

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