Angular2登录服务jwt令牌-Java 学习之路

我尝试用angular2前端实现jwt标记 . 当我尝试使用Postman使用post方法接收令牌时，我收到授权令牌，但在Angular中这样做会返回null响应对象 . 这是我使用的Angular服务的代码片段 .

return this.http.post(this.authUrl, { username: username, password: password })
                .map((response: Response) => {
                    console.log(username + ' ' + password);
                    // login successful if there's a jwt token in the response
                    let token = response.json() && response.json().token;
                    console.log(token);
                    if (token) {
                        // set token property
                        this.token = token;

                        // store username and jwt token in local storage to keep user logged in between page refreshes
                        localStorage.setItem('currentUser', JSON.stringify({ username: username, token: token }));

                        // return true to indicate successful login
                        return true;
                    } else {
                        // return false to indicate failed login
                        return false;
                    }
                });

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

我唯一的线索就是尝试调用这样的post方法

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

我收到Subscriber对象 . 使用toPromise（）而不是subscribe（）这样做我得到了ZoneAwarePromise，但我无法在两种情况下找到令牌 .

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://stackoverflow.com/a/48306230/1160794）

回复于 2024-04-29T04:59:51+08:00

0

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

回复于 2024-04-29T04:59:51+08:00

Angular2登录服务jwt令牌

2 回答

相关问题