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

时间:2019-04-04 14:17:16

标签: angular express jwt

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

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

如何读取用户信息/将其传递给angular应用?

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

实际结果: Angular App无法获取任何用户数据。

2 个答案:

答案 0 :(得分:0)

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

npm install jsonwebtoken

我还没有任何代码可以处理传入的请求,您错过了吗?

答案 1 :(得分:0)

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

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

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