Angular 2組織AuthGuard（canActivate）和AuthService代碼

Question

從我當前的代碼中，當使用canActivate路由到頁面時，我可以使用以下方法從服務器獲取身份驗證數據

auth.guard.ts（版本1）

import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';
import { Observable } from 'rxjs/Rx';
import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import { Headers, RequestOptions } from '@angular/http';

@Injectable()
export class AuthGuard implements CanActivate {
    constructor(private router: Router, private http: Http) { }

    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
        let headers = new Headers({ 'Content-Type': 'application/json' });
        let options = new RequestOptions({ headers: headers });

        return this.http.post('/api/authenticate', options )
            .map(res => res.json())
            .map((res) => {
                if (res.response) {
                    return true;
                } else {
                    this.router.navigate(['/register']);
                    return false;
                }
            });
    }
}

我想按如下所示將canActivate內的代碼分隔為auth.service.ts，但是它並不等待http請求完成並返回

驗證服務

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import { Headers, RequestOptions } from '@angular/http';
import 'rxjs/add/operator/map';
import { Observable } from 'rxjs/Observable';

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

    authenticate() :Observable<any>{
        let headers = new Headers({ 'Content-Type': 'application/json' });
        let options = new RequestOptions({ headers: headers });

        return this.http.post('/api/authenticate', { options })
            .map(res => res.json())
    }
}

auth.guard.ts（版本2）

    import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';
import { Observable } from 'rxjs/Rx';
import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import { Headers, RequestOptions } from '@angular/http';
import { AuthService } from './auth.service';

@Injectable()
export class AuthGuard implements CanActivate {
    constructor(private authService: AuthService, private router: Router, private http: Http) { }

    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
        if(this.authService.authenticate()){
            return true;
        }else{
            this.router.navigate(['/register])
            return false;
        }
    }
}

我想念什么？

Answer 1

auth.guard.ts（版本3）

export class AuthGuard implements CanActivate {
    constructor(private authService: AuthService, private router: Router, private http: Http) { }

    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
        return this.authService.authenticate().map((res) => {
            if (res.response) {
                return true;
            } else {
                this.router.navigate(['/register']);
                return false;
            }
        })

    }
}

上面的代碼將鏈接您的可觀察對象。 但是您的代碼還有另一個問題if(res.response) {return true} ，當有響應時，可能是“用戶存在並登錄”或“用戶不存在”。 因此，兩種情況下您都返回true 。 您需要修復。