Angular angular2-jwt：使用 AuthHttp 出错：JWT 必须有 3 个部分答案

【问题标题】：Angular angular2-jwt: Getting error using AuthHttp: JWT must have 3 partsAngular angular2-jwt：使用 AuthHttp 出错：JWT 必须有 3 个部分
【发布时间】：2017-10-31 15:18:54
【问题描述】：

我在使用 AuthHttp 时遇到错误，但身份验证返回一个好的令牌。我在https://jwt.io/ 上进行了验证，效果很好。

我正在使用 Angular 4。我的代码如下：

登录代码

 signIn(login: string, password: string) {
    this.UserLogin.name = login;
    this.UserLogin.password = password;

    this.http.post(this.baselink + '.json', this.UserLogin, { headers: contentHeaders })
      .subscribe(
      response => {
        localStorage.setItem('id_toke', response.json().token);
        this.jwt = localStorage.getItem('id_toke');
        this.decodedJwt = this.jwtHelper.decodeToken(this.jwt);
        this.userRole = this.decodedJwt.roles;
        console.log(this.userRole);
        this.useJwtHelper();
        this.router.navigate(['/']);
      },
      error => {
        console.log('Http Error ' + error.text());
        this.router.navigate(['http-error']);
      }
      );
  }

令牌@ @@ 987654322 987654323 @： “eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJhZG1pbiIsInJvbGVzIjpbInJlYWQtb25seSIsInJlYWQtd3JpdGUiXSwiaWF0IjoxNDk2MTkxNDg4LCJleHAiOjE0OTYyMDAwODh9.qPCQY3yHujuCLb9g-F5b0MUQO3tyTr_Y5YRoMOQ0DBA” P>

然而获取数据却抛出错误

   getPayments() {
       return this.authHttp.get(this.baselink + '/getPayments', { headers: contentHeaders })
            .map(
            (response: Response) => {
                const data = response.json();
                return data;
            }
            )
            .catch(
            (error: Response) => {
               console.log('Error getPayments: ' + error);
                return Observable.throw('Something went wrong: ' + error.text);
            }
            );
     }

得到

错误 getPayments：错误：JWT 必须有 3 个部分

话虽如此，如果我改用return this.http.get(this.baselink + '/getPayments')，它就可以工作。 AuthHttp 的连接没有到达服务器。该特定控制器暂时不受服务器限制，但目的是保护它可能令牌不包含在 AuthHttp 标头中

@NgModule({
    providers: [
        {
            provide: AuthHttp,
            useFactory: authHttpServiceFactory,
            deps: [Http, RequestOptions]
        }
    ]
})
export class AuthorizationModule { }


export function authHttpServiceFactory(http: Http, options: RequestOptions) {
    return new AuthHttp(new AuthConfig({
        headerName: 'Authorization',
        headerPrefix: 'bearer',
        tokenName: 'token',
        tokenGetter: (() => localStorage.getItem('id_token')),
        globalHeaders: [{ 'Content-Type': 'application/json' }],
        noJwtError: true
    }), http, options);
}

和全局标题

export const contentHeaders = new Headers();
contentHeaders.append('Accept', 'application/json');
contentHeaders.append('Content-Type', 'application/json');

【问题讨论】：

更新这是服务器端的交叉问题。因此，显然浏览器将发送 2 个调用请求服务器允许该标头和服务器批准它。在我的服务器端，我需要将我的 url 添加到 FilterRegistraionBean。我已经添加但不正确

标签： angular jwt angular2-jwt

【解决方案1】：

我将我的功能更改为以下

getPayments():  Observable<Payment[]> {
    // add authorization header with jwt token - mine is saved in authService service in jwt variable
    let headers = new Headers({ 'Authorization': 'Bearer ' + this.authService.jwt });
    let options = new RequestOptions({ headers: headers });


    return this.http.get(this.baselink + '/getPayments', options)
        .map((response: Response) => response.json())
        .catch(
        (error: Response) => {
            console.log(error);
            return Observable.throw('Something went wrong: ' + error.text);
        });
}

现在出现这个错误

function (encodingHint) {
        if (encodingHint === void 0) { encodingHint = 'legacy'; }
        if (this._body instanceof URLSearchParams) {
            return this._body.toString();
        }
        if (this._body instanceof ArrayBuffer) {
            switch (encodingHint) {
                case 'legacy':
                    return String.fromCharCode.apply(null, new Uint16Array(/** @type {?} */ (this._body)));
                case 'iso-8859':
                    return String.fromCharCode.apply(null, new Uint8Array(/** @type {?} */ (this._body)));
                default:
                    throw new Error("Invalid value for encodingHint: " + encodingHint);
            }
        }
        if (this._body == null) {
            return '';
        }
        if (typeof this._body === 'object') {
            return JSON.stringify(this._body, null, 2);
        }
        return this._body.toString();
    }

检查服务器端，授权丢失！！

更新这是服务器端的交叉问题。因此，显然浏览器将发送 2 个调用请求服务器允许该标头和服务器批准它。在我的服务器端，我需要将我的 url 添加到 FilterRegistraionBean。我添加了它但不正确

【讨论】：