如何从 JavaScript (Angular 2/4) 中的授权标头中检索承载令牌？答案

【问题标题】：How to retrieve a Bearer Token from an Authorization Header in JavaScript (Angular 2/4)?如何从 JavaScript (Angular 2/4) 中的授权标头中检索承载令牌？
【发布时间】：2017-11-13 19:38:33
【问题描述】：

在 JavaScript 中，我有一个方法可以通过 http post 请求成功地对我的服务器进行身份验证。

来自我的服务器的响应数据在 Authorization 标头中发送 JWT，如下所示：

Authorization: Bearer mytoken12345abc

我可以从我的服务器响应数据中成功检索授权标头，例如：

let authheader = response.headers.get('Authorization');

但是我该如何解析呢？ “承载”是关键吗？就像这样：

let token = authheader.Bearer

这显然是不正确的。接下来我可以尝试什么？

换句话说，以下是最好的方法吗？

let token = response.headers.get('Authorization');
let parsedToken = token.slice(7);

【问题讨论】：

你在工作吗？
是 Angular 2 / 4
后端nodejs ?
后端是 Apache / PHP

标签： javascript angular header jwt

【解决方案1】：

当您从服务器获取令牌时，将其设置在浏览器会话/本地的存储中，如下所示

sessionStorage.setItem('token', authheader);

每当您调用服务以在标头中设置授权令牌时，它都是一种安全的方式，如下所示

import { Http, Headers, RequestOptions, Response } from '@angular/http';
   getUser(){

            let headers = new Headers({ 'Authorization': 'Bearer ' + sessionStorage.getItem('token') });
            let options = new RequestOptions({ headers: headers });

            // get users from api
            return this.http.get('http://localhost:9000/api/user', options)
                .map((response: Response) => response.json());
        }

【讨论】：

谢谢你，我完全理解这一点，但是......在我可以将令牌设置到 sessionStorage 之前，我如何从“授权”标题中检索它？我的服务器正在以与您向我展示如何将其发送到服务器的方式相同的方式在标头中发送令牌...
你的意思是？你想从 angular2 中的 api 标头获取令牌吗？
是的，我的服务器在“授权”标头中成功登录后正在发送令牌：授权：承载 mytoken123abc ...
但是兄弟。授权通常用作请求标头，而不是响应。为什么不在登录时在响应正文中返回访问令牌？
是的，您应该告诉他们仅在登录成功时以简单的 json 响应发送令牌（登录成功后无需在另一个 API 中再次发送令牌），然后从响应中获取该令牌并将其存储在会话或本地存储你想要什么。

【解决方案2】：

根据 jwt.io 文档，

当用户想要访问受保护的路由或资源时，用户代理应该发送 JWT，通常在 Authorization 标头中使用 Bearer 模式。

因此，在 Authorization 标头中使用 JWT 应该由客户端使用，而不是服务器用于初始响应。

正确的方法是将令牌作为响应正文的一部分。我们使用一个

 { jwt: TOKEN }

为此键入方案。然后您可以通过response.json() 轻松访问它。

您可以使用response.headers.get(...) 直接访问标头值，但您必须使用split、substr 或正则表达式匹配才能获取实际令牌。

【讨论】：