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

Question

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

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

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

意图：* Express Proxy用于提供角度应用和转发请求标头信息。因为angular无法读取请求标头。

我们的想法是编写代理来为角度应用程序提供服务。此代理（例如快速应用程序）可以读取请求标头并将其传递给角度应用程序。

我能够提供角度应用程序，但（1）我如何传递标题信息？ - >如何将变量/数据传递给Angular App？

---

不那么重要问题因为有一些图书馆：（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 App显示通过请求标头发送的用户数据。

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

Answer 1

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

npm install jsonwebtoken

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

Answer 2

我想指出你需要改进的东西很少。

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

您无需解码JWT以显示用户信息。因此，如果你使用Nginx创建一个代理api，当客户端执行Angular代码时，客户端将调用它来获取JWT。