Angular2 Http Call未觸發

Question

內容：

在完成了幾篇教程之后，我將測試Angular2和JWT的身份驗證。 我帶有一個組件和一個服務：

app.component.ts
user.service.ts

應用程序組件（和模板）包含對可觀察對象的訂閱，該訂閱顯示了用戶的登錄狀態。 “可觀察”項保留在用戶服務中，並且在用戶登錄和注銷時進行更改（精細）。

身份驗證令牌在“ localStorage”中寫為“ auth_token”。 它包含一個有效性值（時間），該值應迫使用戶在一段時間后再次登錄。

我想做的是在應用程序初始化中檢查令牌的有效性。 首先，我嘗試從user.service構造器執行此操作，然后（失敗），嘗試從app.component中的ngOnInit執行操作，然后（再次失敗），我嘗試在事件調用時執行操作（單擊a按鈕），但再次失敗！

一些縮短的代碼：

//app.component.html
//...
    <a md-button class="app-icon-button" aria-label="checklogin" (click)="checkLogin()">
        <md-icon svgIcon="check"></md-icon>
    </a>
//...

//app.component.ts
//...
    checkLogin(){
        console.log('CHECK LOGIN FUNCTION');
        let token = localStorage.getItem('auth_token');
        if(token){
            console.log('TOKEN FOUND');
            this.userService.checkToken(token);
        }else{
            console.log('NO TOKEN FOUND');
        }
    }
//...

//user.service.ts
//...
    checkToken(token){
        console.log('CHECK TOKEN FUNCTION');
        console.log('TOKEN : '+token);
        let headers = new Headers();
        headers.append('Content-Type','application/json');
        return this.http
            .post(
                '/url/script.php',
                JSON.stringify(token),
                { headers }
            )
            .map(res => res.json())
            .map((res) => {
                console.log('SCRIPT RESULT : ');
                if(res.valid){
                    console.log('TOKEN IS VALID');
                    return true;
                }else{
                    console.log('TOKEN NOT VALID');
                    return false;
                }
            });
    }
//...

我確實跳過了可觀察的部分和訂閱。

問題：

問題實際上是該應用程序從不調用腳本！

當我確實點擊“ checkLogin”按鈕時（如果存在令牌），

console shows 'CHECK LOGIN FUNCTION',
console shows 'TOKEN FOUND',
console shows 'CHECK TOKEN FUNCTION',
console shows 'TOKEN : '****************************** (token),

但是它永遠不會顯示“ SCRIPT RESULT”，並且在使用Firebug檢查http調用是否完成時，script.php沒有調用。 看起來this.http部分只是被忽略了...

感謝您的閱讀/幫助

Answer 1

僅當您有一個subscriber ，使用Observables Ajax調用才有效。

因此，您需要subscribe該Observable 。 這是Angular 2功能。 當您不訂閱Observable ，它將永遠不會進行該調用。

同樣，您也不需要從訂閱服務器返回任何內容，因為您實際上無法返回任何內容。

this.userService.checkToken(token).subscribe((res) => {
   console.log('SCRIPT RESULT : ');
   if(res.valid) {
      console.log('TOKEN IS VALID');          
   } else {
      console.log('TOKEN NOT VALID');
   }
});

checkToken(token){
   console.log('CHECK TOKEN FUNCTION');
   console.log('TOKEN : '+token);
   let headers = new Headers();
   headers.append('Content-Type','application/json');
   return this.http
       .post(
           '/url/script.php',
           JSON.stringify(token),
           { headers }
       )
       .map(res => res.json());           
}

Answer 2

當訂閱僅在使用者使用.subscribe方法訂閱輸出結果時使用時，服務才能開始工作。

您需要： this.userService.checkToken(token).subscribe()

Answer 3

您的checkToken()方法返回一個需要subsrcibe的Observable 。 可觀察對象除非已訂閱，否則將永遠不會執行。

checkLogin(){
        console.log('CHECK LOGIN FUNCTION');
        let token = localStorage.getItem('auth_token');
        if(token){
            console.log('TOKEN FOUND');
            this.userService.checkToken(token).subscribe(result => {
               console.log(result); 
            }),
            error => { 
               console.log(error); 
            });
        } else {
            console.log('NO TOKEN FOUND');
        }
    }

Answer 4

您是否嘗試過使用Postman並嘗試調用所需的函數？

另外，如果angular2-jwt可以為您做到這一點，為什么還要驗證令牌？

您可以這樣做：

使用npm安裝angular2-jwt 。

包含在app.module.ts ：

import { AUTH_PROVIDERS } from 'angular2-jwt';

添加到提供者：

providers: [
    AUTH_PROVIDERS,
],

例如auth.service.ts看起來像這樣：

import { Injectable, Inject }                                               from '@angular/core';
import { Http, Response, Headers, RequestOptions, RequestMethod }           from '@angular/http';
import { Router }                                                           from '@angular/router';

import { Observable }                                                       from 'rxjs/Observable';
import { Configuration }                                                    from '../../app.config';

import { RegisterViewModel }                                                from '../../model/viewModel/registerViewModel';
import { LoginViewModel }                                                   from '../../model/viewModel/loginViewModel';

import { tokenNotExpired, AuthHttp }                                        from 'angular2-jwt';

@Injectable()
export class AuthService {

private actionUrl: string; 

constructor(private _http: Http, private _config: Configuration, private _router: Router, private _authHttp: AuthHttp){
    this.actionUrl = _config.apiUrl;
}

register(user: RegisterViewModel){
    let headers = new Headers({ 'Content-Type': 'application/json' });
    //Admin in this system can only register users. that is why auth
    return this._authHttp.post(this.actionUrl + '/Account/Register', JSON.stringify(user), { headers : headers })
        .do(response => {
            console.log(response.toString());
        });
}

login(user: LoginViewModel) {
    let headers = new Headers({ 'Content-Type': 'application/x-www-form-urlencoded' });
    return this._http.post('http://localhost:56181/api/token', "username=" + user.userName + "&password=" + user.password + "&userId=" + user.userId, { headers : headers })
        .do(response => {
            if(response){
                let authResult = response.json();
                this.setUser(authResult);
                this._router.navigate(['']);
            }
        });
}

public isAuthenticated(): boolean {
    //angular2-jwt has this function to check if token is valid
    return tokenNotExpired();
}

private setUser(authResult: any): void {
    localStorage.setItem('id_token', authResult.id_token);
}

public logout(): void {
    localStorage.removeItem('id_token');
    this._router.navigate(['']);
}

}

還要記住， angular2-jwt在localstorage id_token令牌的默認名稱為id_token ，否則您將不得不使用angular2-jwt幫助類來指定其他令牌名稱。

您只需執行以下操作即可檢查其是否正常工作：

在app.component.ts ：

export class AppComponent { 
constructor(private _auth: AuthService){
}
}

並在app.component.html ：

 <li>
 <a class="nav-link" [routerLink]="['/login']" *ngIf="!_auth.isAuthenticated()">Login</a>
 </li>
 <li>
 <a class="nav-link" (click)="_auth.logout()" *ngIf="_auth.isAuthenticated()">Log Out</a>
 </li>

您也可以在以下位置閱讀有關它的一些文檔：

https://auth0.com/blog/introducing-angular2-jwt-a-library-for-angular2-authentication/