Question

我实现了以下教程以获得一些Angular基础知识： http://jasonwatmore.com/post/2016/08/16/angular-2-jwt-authentication-example-tutorial

另外我实际上想要使用＆＃34; angular2-jwt＆＃34;图书馆。但是，如果本地没有保存JWT，我使用authHttp发送的每个GET或POST请求都会在控制台中出现空错误。＆＃34;错误：login.component.html导致错误：＆＃34;

没有＆＃34;没有JWT存在或已过期＆＃34;错误文字，什么都没有。
顺便说一下，标准的Http Class正常工作。＆＃34; tokenNotExpired（）＆＃34;方法。
还尝试添加

'js-base64':'npm:js-base64/base64.js',
'buffer':'@empty'

映射我的systemsjs.config.js的信息，但仍然没有结果。

有什么想法我做错了什么？：（

Angular 2.1.0 + angular2-jwt 0.1.25

app.module.ts

import {NgModule} from "@angular/core";
import {BrowserModule} from "@angular/platform-browser";
import {FormsModule} from "@angular/forms";
import {HttpModule} from "@angular/http";
import {AppComponent} from "./app.component";
import {AppRoutingModule} from "./app-routing.module";
import {LoginComponent} from "./login/login.component";
import {MainComponent} from "./main/main.component";
import {AuthService} from "./services/auth.service";
import {AUTH_PROVIDERS} from "angular2-jwt";

@NgModule({
    imports: [
        BrowserModule,
        AppRoutingModule,
        FormsModule,
        HttpModule
    ],
    declarations: [
        AppComponent,
        LoginComponent,
        MainComponent
    ],
    providers: [
        AuthService,
        AUTH_PROVIDERS
    ],
    bootstrap: [AppComponent]
})
export class AppModule
{
}

login.component.ts

import { Component } from '@angular/core';
import { AuthService } from "../services/auth.service";

@Component({
    moduleId: module.id,
    templateUrl: 'login.component.html'
})

export class LoginComponent {

    user: any = {
        login: 'defaultLogin',
        password: 'defaultPassword'
    };
    errorMsg = '';

    constructor(
        private authService: AuthService) { }


    login() {
        this.authService.login(this.user.name, this.user.password)
            .subscribe(result => {

            });
    }
}

auth.service.ts

import {Injectable} from "@angular/core";
import {Response} from "@angular/http";
import "rxjs/add/operator/map";
import "rxjs/add/operator/toPromise";
import {AuthHttp} from "angular2-jwt";

@Injectable()
export class AuthService
{
    constructor(private authHttp: AuthHttp)
    {
    }

    login(username: string, password: string)
    {
        return this.authHttp.post('/api/login', JSON.stringify({username: username, password: password}))
            .map((response: Response) =>{
                return false;
            });
    }
}

Answer 1

这是 angular2-jwt

的默认行为

默认情况下，如果没有保存有效的 JWT ，AuthHttp将返回带有“无效JWT”的可观察错误。如果你想继续如果您使用未经身份验证的请求，则可以将noJwtError设置为 true。

如果您想要执行经过身份验证的请求，则只应使用AuthHttp，因此在您的AuthService上，您还需要导入Http服务，如下所示：

import { Injectable } from "@angular/core";
import { Http, Response} from "@angular/http";
import "rxjs/add/operator/map";
import "rxjs/add/operator/toPromise";
import { AuthHttp } from "angular2-jwt";

@Injectable()
export class AuthService
{
    constructor(private http: Http, private authHttp: AuthHttp){ }

    login(username: string, password: string){
      //use this.http instead of this.authHttp
      return this.http.post('/api/login', {username: username, password: password})
        .map((response: Response) => {
          return false;
        });
    }
}

如前所述 Angular2-jwt 检查有效的JWT令牌，如果有可能没有有效的JWT，那么它甚至不会执行请求。

但是如果你想为每个请求使用authHttp，你可以通过覆盖提供者的配置来禁用JWT令牌验证，在 app.modute.ts 上添加如下：

import {NgModule} from "@angular/core";
import {BrowserModule} from "@angular/platform-browser";
import {FormsModule} from "@angular/forms";
import {HttpModule} from "@angular/http";
import {AppComponent} from "./app.component";
import {AppRoutingModule} from "./app-routing.module";
import {LoginComponent} from "./login/login.component";
import {MainComponent} from "./main/main.component";
import {AuthService} from "./services/auth.service";
import { provideAuth } from 'angular2-jwt';

@NgModule({
    imports     : [
        BrowserModule,
        AppRoutingModule,
        FormsModule,
        HttpModule
    ],
    declarations: [
        AppComponent,
        LoginComponent,
        MainComponent
    ],
    providers   : [
        AuthService,
        provideAuth({
          noJwtError: true,
        })
    ],
    bootstrap   : [AppComponent]
})
export class AppModule
{
}

更多信息here

编辑：

带错误处理程序的AuthService：

import { Injectable } from "@angular/core";
import { Http, Response} from "@angular/http";
import "rxjs/add/operator/map";
import "rxjs/add/operator/toPromise";
import { AuthHttp, AuthHttpError } from "angular2-jwt"; //we need to import the AuthHttpError

@Injectable()
export class AuthService
{
    constructor(private http: Http, private authHttp: AuthHttp){ }

    login(username: string, password: string){
      //use this.http instead of this.authHttp
      return this.http.post('/api/login', {username: username, password: password})
        .map((response: Response) => {
          return false;
        })
        .catch(this.handleError); // we had the catch
    }

    private handleError (error: Response | any) {
        // In a real world app, we might use a remote logging infrastructure
        let errMsg: string;
        if (error instanceof AuthHttpError) {
          //here we will handle JWT errors
          console.log(error)
        } else if (error instanceof Response) {
          const body = error.json() || '';
          const err = body.error || JSON.stringify(body);
          errMsg = `${error.status} - ${error.statusText || ''} ${err}`;
        }else {
          errMsg = error.message ? error.message : error.toString();
        }
        console.error(errMsg);
        return Observable.throw(errMsg);
    }
}

Angular2-jwt，当没有JWT令牌时，在GET / POST响应中获得空错误

1 个答案:

编辑：