如何将请求标头信息传递给 Angular6 应用程序（JWT 通过请求标头发送）

Posted 2023-03-10

【中文标题】如何将请求标头信息传递给 Angular6 应用程序（JWT 通过请求标头发送）

【英文标题】：How to pass request header information to Angular6 app (JWT send by request header)

【发布时间】：2019-08-26 08:15:25

【问题描述】：

通过其他外部应用程序（例如 Web 应用程序防火墙 WAF）进行用户管理/会话管理 外部应用程序将请求标头中包含用户信息的 JWT 发送到应用程序 Angular6 应用需要来自请求标头的信息...???

Angular 应用应该显示一些用户信息。 用户管理由外部应用程序完成，该应用程序仅将经过身份验证的用户重定向到 Angular 应用程序并在请求标头中添加用户信息。 没有服务 API 来请求用户信息。用户信息仅通过请求标头发送到应用程序（仅在外部服务器端可用）。

如何读取/传递用户信息到 Angular 应用程序？

意图： * Express Proxy 为 Angular 应用程序提供服务并转发请求标头信息。因为angular无法读取请求头。

这个想法是编写一个代理来为 Angular 应用程序提供服务。例如，这个代理可以读取请求标头并将其传递给 Angular 应用程序。

我可以为 Angular 应用程序提供服务，但是 (1) 我如何传递标头信息？ --> 如何将变量/数据传递给 Angular App？

---

不是那么重要的问题，因为有一些库： (2) 如何解码 jwt 并验证它（签名 jwt）并仅传递来自有效载荷的一些信息。

要为 Angular 应用程序提供服务，我的快速代码如下所示：

---

const html = __dirname + '/angularApp/dist/angularApp';

const http = require('http');
const port = 4000;

// Express
const bodyParser = require('body-parser');
const compression = require('compression');
const express = require('express');
var app = express();

app // config to serve angular app
    .use(compression())
    .use(bodyParser.json())
    // Static content
    .use(express.static(html));

app // Start server
    .listen(port, function () 
        console.log('Port: ' + port);
        console.log('Html: ' + html);
    );

文件结构：

- root
-- server.js
-- angularApp
--- dist
---- angularApp
----- ... angular app build files
--- ... angular app files

预期结果： Angular App 显示通过请求标头发送的用户数据。

实际结果： Angular App 没有获取任何用户数据。

【参考方案1】：

我想指出一些需要改进的地方。

您不应该使用 express 来服务 Angular App ，除非您使用 Angular Universal 进行 s-s-r。因为使用 Express 服务 Angular 应用程序根本没有优化。

您无需解码 JWT 即可显示用户信息。因此，最好使用 nginx 创建一个代理 api，当 Angular 代码在客户端执行时，客户端会调用该代理 api 来获取 JWT。

【讨论】：

问题是我必须制作一个应用程序，其中对应用程序的第一次调用在请求中包含标头中的 JWT。 （JWT 由 WAF 发送，WAF 将调用重定向到请求标头中的应用程序...）

【参考方案2】：

我会建议一个库来解码 jwt，例如

npm install jsonwebtoken

我还没有看到任何处理传入请求的代码，你错过了吗？