Angular2：canActivate

Question

當前，我想實現canActivate函數，我想要的一切都是每次請求頁面時向服務器發送一個請求，並在json響應中獲取true / false，以便了解用戶身份驗證並允許其查看當前頁面。 看來我完全迷住了可觀察和承諾對象，這對我來說是新的，到目前為止我有什么。

import { Injectable }     from '@angular/core';
import {CanActivate, Router}    from '@angular/router';
import { Http, Response } from '@angular/http';
import {Observable, Observer, Subject} from "rxjs/Rx";

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

    canActivate() {
        if (this.isAuthenticated()) {
            return true;
        } {
            this.router.navigate(['404']);
            return false;
        }
    }

    isAuthenticated() : Observable<boolean> {
        var subject = new Subject<boolean>();
        this.http.get("/index.php?module=Api&action=IsAuthenticated")
            .map((res : Response) => res.json())
            .subscribe(res => {
                console.log("next: returning true");
                subject.next(true);
            }, (res) => {
                console.log("next: returning false");
                subject.next(false);
            });
        return subject.asObservable().first();
    }
}

Answer 1

一些變化

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

    canActivate() {
        return this.isAuthenticated().first(); // not sure if `.first() is still necessary
    }

    isAuthenticated() : Observable<boolean> {
        return this.http.get("/index.php?module=Api&action=IsAuthenticated")
            .map((res : Response) => res.json())
            .catch(err => return Observable.of(false))
            .map(res => {
                return true
            });
    }
}

如果isAuthenticated()一些異步執行，則不會返回true或false ，而是會得到一個Observable ，它最終會發出true或false值

我們要做的是返回從isAuthenticated()獲得的可觀察值

在isAuthenticated with return the observable we get from this.http.get（） isAuthenticated with return the observable we get from對象， and transform the emitted event. It seems the response from the server ( and transform the emitted event. It seems the response from the server ( ) is not used. Therefore we use and transform the emitted event. It seems the response from the server ( res.json（） ) is not used. Therefore we use and transform the emitted event. It seems the response from the server ( ) is not used. Therefore we use ) is not used. Therefore we use in case of an error and ) is not used. Therefore we use catch（） to return false in case of an error and否則to return true。

因為未使用來自服務器的響應，所以可以省略.map((res : Response) => res.json()) ，除非您希望從該false返回false情況。 此外，您的生產代碼可能看起來有所不同，並且需要處理響應。

我們不會在任何地方訂閱，因為這是路由器從canActivate返回Observable時所做的事情，並且如果我們調用canActivate subscribe() ，則會得到Subscription而不是Observable 。

Answer 2

canActivate可以返回Observable<boolean> ， Promise<boolean>或boolean 。

由於您依賴異步檢查，因此無法返回布爾值。

但是，看起來您可以輕松完成

canActivate(): Observable<boolean> {
  return this.isAuthenticated();
}

我還不是Observable專家，但是如果您未經授權，也可以很容易地鏈接到重定向呼叫。

Answer 3

這是適合我的解決方案：

canActivate() {
    return this.http.get("/index.php?module=Api&action=IsAuthenticated")
        .toPromise()
        .then(this.extractData)
        .catch(this.handleError);
}