Angular 2: 获取授权头部

Question

在我的应用程序（Angular 2 / Ionic 2）中，我实现了自己的登录/身份验证。基本上它是这样工作的：在登录时，PHP后端验证用户名和密码。生成一个令牌，将其发送回前端（Authorization标头）。后端的响应如下：

HTTP/1.1 200 OK
Host: localhost:8080
Connection: close
X-Powered-By: PHP/5.6.28
Set-Cookie: PHPSESSID=jagagi2le1b8i7r90esr4vmeo6; path=/
Expires: Thu, 19 Nov 1981 08:52:00 GMT
Cache-Control: no-store, no-cache, must-revalidate, post-check=0, pre-check=0
Pragma: no-cache
Content-Type: application/json
 Authorization: d7b24a1643a61706975213306446aa4e4157d167eaad9aac989067a329c492d3
Access-Control-Allow-Origin: *
Access-Control-Allow-Headers: X-Requested-With, Content-Type, Accept, Origin, Authorization
Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS
Content-Length: 301

很明显有一个带有令牌的授权标头。由于我在Allow-Headers标头中看到了Authorization，因此CORS似乎也已经正确设置。

但是，当我试图在Angular 2中获取标头时，它总是返回null：

private extractDataAndSetAuthHeader(res: Response) {

    // Set auth header if available.
    // If not available - user is not logged in. Then 
    // we also have to remove the token from localStorage
    if(res.headers.has("Authorization"))
    {
        let token = res.headers.get("Authorization");

        this.setToken(token);
    }
    else
    {
        // If no token is sent, remove it
        this.removeToken();
    }

    let body = res.json();
    return body.data || { };
}

该方法的第一行返回false。此外，在检查响应中的headers对象时，仅显示以下内容（Chrome开发者工具）：

[[Entries]]:
Array[4]
0:{"pragma" => Array[1]}
1:{"content-type" => Array[1]}
2:{"cache-control" => Array[1]}
3:{"expires" => Array[1]}

该对象中不存在授权标头。

有人可以帮忙吗？

提前致谢 :)

- dave0688

---

“Authorization” 通常用作请求头，而不是响应。为什么不在响应体中返回访问令牌？ - Darin Dimitrov

因为据我所知，这就是“Authorization”头的作用。在每个请求中（当用户已登录时），我都会在请求中发送一个Authorization头，检查令牌是否仍然有效，然后为了更安全起见，重新生成令牌，并将其与Authorization头一起发送回前端。我有遗漏什么吗？ - dave0688

https://dev59.com/op_ha4cB1Zd3GeqPv0Jq - Paul Samsotha

这对我来说看起来不是一个好策略。如果客户端并行发送多个请求怎么办？如果第二个请求的响应在第一个请求的响应之前到达怎么办？每次请求更改令牌有什么意义：如果您关心安全，它应该由TLS保护。 - JB Nizet

@peeskillet 您的提示是解决方案，非常感谢！ - dave0688

@JBNizet 好的，是的，你说得对 - 我没有考虑到那个。我的意思是，如果有人不知何故获得了令牌，它只对一个请求有效。从数据库的角度来看（在每个请求中更新用户），这并不重要，因为用户无论如何都需要更新（更新token_expire日期）。 - dave0688

Answer 1

只想发布这个答案，因为它可能会帮助其他人： 解决方案是设置

标签

Access-Control-Expose-Headers: Authorization

然后 - 前端也可以读取Authorization头。

- dave0688

---

你把这个加在哪里了？ - MrNew

你必须在后端添加这个。 - VWeber

谢谢，你救了我一天！ - lhrec_106

请详细说明。 - iMe

Answer 2

这个答案对我很有帮助：链接 它展示了如何在后端添加它以及如何在前端使用它。

Java 后端：

public void methodJava(HttpServletResponse response){
...
response.addHeader("access-control-expose-headers", "Authorization");
}

可以使用以下方法在Angular中访问头信息：

return this.http
    .get(<your url here for your backend>)
    .map(res => console.log("cookie: " + res.headers.get("Authorization") )
}

- EssaidiM

---

欢迎提供解决方案的链接，但请确保您的回答在没有链接的情况下也有用：请添加链接周围的上下文，以便其他用户知道它是什么以及为什么存在，然后引用链接页面中最相关的部分，以防目标页面不可用。仅包含链接的答案可能会被删除。 - Rob

Answer 3

这与Angular无关。问题在于CORS默认限制标头，当调用CORS请求时，您看不到“Authorization”标头。因此，请调整服务器以使其发送Authorization标头。

OPTIONS请求（预检）的响应中必须提供Access-Control-Allow-Headers。

POST / GET请求的响应中必须提供Access-Control-Expose-Headers。

Access-Control-Expose-Headers：Authorization

- Durgesh Pal