Question

我尝试使用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，但在两种情况下我找不到令牌。

Answer 1

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

从您提供的链接中的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）

Answer 2

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

Answer 3

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

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

Angular2登录服务jwt token

3 个答案: