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

Question

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

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

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

意图： *快速代理提供角度应用程序并转发请求标头信息。因为角度不可能读取请求标头。

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

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

---

不是那么重要的问题，因为有一些库： (2)如何解码JWT并对其进行验证(签名JWT)并仅传递有效载荷中的一些信息。

要服务器角度应用程序，我的快速代码如下所示：

---

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 应用程序显示通过请求标头发送的用户数据。

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

Answer 1

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

npm install jsonwebtoken

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

Answer 2

我想指出您需要改进的地方很少。

您不应该使用express来提供Angular App，除非您使用Angular Universal进行SSR。因为使用 Express 来提供角度应用程序根本没有优化。

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