Angular2登录服务jwt令牌

Posted 2023-03-07

【中文标题】Angular2登录服务jwt令牌

【英文标题】：Angular2 login service jwt token

【发布时间】：2018-07-18 06:32:10

【问题描述】：

我尝试使用 angular2 前端实现 jwt 令牌。 当我尝试使用 Postman 使用 post 方法接收令牌时，我收到了授权令牌，但在 Angular 中这样做会返回空响​​应对象。 这是我使用的 Angular 服务的 sn-p 代码。

返回 this.http.post(this.authUrl, 用户名：用户名，密码：密码 ) .map（（响应：响应）=> console.log(用户名 + ' ' + 密码); // 如果响应中有 jwt 令牌，则登录成功 让 token = response.json() && response.json().token; 控制台.log（令牌）； 如果（令牌） // 设置令牌属性 this.token = 令牌； // 将用户名和 jwt 令牌存储在本地存储中，以在页面刷新之间保持用户登录 localStorage.setItem('currentUser', JSON.stringify( username: username, token: token )); //返回true表示登录成功 返回真； 别的 // 返回 false 表示登录失败 返回假； );

问题是，当我尝试记录令牌时，响应为空。 对于我遵循的代码的后端部分 this implementation of jwt token.

我唯一的线索是尝试像那样调用 post 方法

this.http.post<any>(this.authUrl,  username: username, password: password ).subscribe();

我收到订阅者对象。使用 toPromise() 而不是 subscribe() 这样做 我得到了 ZoneAwarePromise，但在这两种情况下都找不到令牌。

【问题讨论】：

从服务器接收到的令牌是在服务器的响应体还是头部？我不知道java，但我的印象是令牌是由服务器在您提供的链接中作为标头添加的

你使用的是Http还是HttpClient类？

我使用 httpClient 类。这可能相关的另一个问题是，当我执行 http.post 请求并尝试将标头添加为第三个参数时，我得到了错误。 private headers = new Headers( 'Content-Type': 'application/json' );

响应中来自服务器的令牌在哪里？标题还是正文？

在标题中。

【参考方案1】：

我找到了解决方案。我需要做的只是添加 Access-Control-Expose-Headers 和我的标题的字符串名称。仅添加 Access-Control-Allow-Headers 不起作用。然后在客户端，我可以使用我的标头名称或后端允许的任何其他标头提取标头。

【参考方案2】：

试试这样的。您需要从授权标头中检索令牌，而不是从正文中。

从您提供的链接中的 curl 示例中，您必须使用类型 application/x-www-form-urlencoded 调用您的服务

它可能无法立即工作（不确定您的后端返回什么内容类型）。如果不是 json，则可能需要对其进行修改。但这应该足以让您继续前进。

    login(username: string, password: string): Observable<boolean>
    
        const body = new HttpParams()
            .set('username', username)
            .set('password', password);

        return this.http.post(this.authUrl, body.toString(),
            
                observe: 'response',//for 'special' headers in response
                headers: new HttpHeaders()
                    .set('Content-Type', 'application/x-www-form-urlencoded')
            )

            .map((response: any) => 

                let authHeader = response.headers.get('Authorization');
                //handle header here
                return true;

            );
    

编辑：

如果您的后端与前端不在同一个域中，则需要使用后端中的 Access-Control-Expose-Headers 标头“公开”这些标头 所以你的服务器响应应该有那个标题

Access-Control-Expose-Headers: Authorization

（见https://***.com/a/48306230/1160794）

【讨论】：

它没有帮助。尽管检查了 chrome 开发工具，但我清楚地看到了名称 Authorization 的标题，其中包含令牌。我遇到的问题是 map 方法中的响应似乎为空。

【参考方案3】：

当您从 Angular 发送标头时，Api 需要允许请求的来源。将此代码添加到类上方的 Spring Boot 控制器中，如下所示。之后，Api 将被允许获取标头。

@CrossOrigin(origins = "*", maxAge = 3600)
@RestController
public class AuthenticationController 
    //services...