Question

我在使用AuthHttp时遇到错误，但authenticate返回了一个好的令牌。我在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']);
      }
      );
  }

令牌![enter image description here] 1： “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必须有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');

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

检查服务器端，缺少授权!!

<强>更新这是服务器端的问题。显然，浏览器将发送2个呼叫，要求服务器允许该标头和服务器批准它。在我的情况下，在服务器端我需要将我的URL添加到FilterRegistraionBean。我添加了但不正确

Angular angular2-jwt：使用AuthHttp获取错误：JWT必须有3个部分

1 个答案: