角角2- JWT :使用AuthHttp: JWT获取错误必须有三个部分

Question

当我使用AuthHttp时，我得到了一个错误，但是身份验证返回了一个很好的令牌。我在https://jwt.io/上验证了它，它很好。

我使用的是角4。我的代码如下：

SignIn码

 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']);
      }
      );
  }

tokenhttps://developer.qcloudimg.com/http-save/yehe-900000/1fd88679a5f40d7538834e358636a531.jpg1:"eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJhZG1pbiIsInJvbGVzIjpbInJlYWQtb25seSIsInJlYWQtd3JpdGUiXSwiaWF0IjoxNDk2MTkxNDg4LCJleHAiOjE0OTYyMDAwODh9.qPCQY3yHujuCLb9g-F5b0MUQO3tyTr_Y5YRoMOQ0DBA“

​

​

但是获取数据是抛出错误

   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必须有三个部分

话虽如此，但如果我使用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');

Answer 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();
    }

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

更新这是服务器端的cros问题。因此，显然浏览器会发送2个电话，请求服务器允许该头和服务器批准它。在我的例子中，服务器端需要将我的url添加到FilterRegistraionBean中。我把它加进去了，但不对