Angular2: canActivate

Question

Currently I want to implement canActivate function, everything I want is to send a request to server each time page requested and get true/false in a json response in order to understand is user authenticated and permitted to review current page. And it seems that I completely stuck with observable and promise objects, which is new for me, what is what I have so far.

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

Günter Zöchbauer · Answer 1 · 2016-11-25T10:38:13.513

A few changes

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

If isAuthenticated() does some async execution, we don't get true or false back, we get an Observable that emits a true or false value eventually

What we do is to return the observable we get from isAuthenticated()

In isAuthenticated with return the observable we get fromthis.http.get()and transform the emitted event. It seems the response from the server (res.json()) is not used. Therefore we usecatch()to returnfalsein case of an error andtrue` otherwise.

Because the response from the server is not used .map((res : Response) => res.json()) could be omitted, except this is where you expect an error from that should case false to be returned. Also your production code might look different and require the response to be processed.

We don't subscribe anywhere, because this is what the router is doing when an Observable is returned from canActivate and if we call subscribe() we get a Subscription instead of an Observable.

Well, it cause an error while compile because `map` method is unresolved, I suppose I should import `map` from elsewhere — Majesty, Nov 25 '16 at 10:41
http://stackoverflow.com/questions/34515173/angular-2-http-get-with-typescript-error-http-get-map-is-not-a-function-in — Günter Zöchbauer, Nov 25 '16 at 10:42
console.log shows that `this.isAuthenticated` is always an object `{_isScalar: false, source: a, operator: a}` no metter what I'm sending from server — Majesty, Nov 25 '16 at 10:47

score 0 · Answer 2 · answered Nov 25 '16 at 10:33

canActivate can return either Observable<boolean>, Promise<boolean> or boolean.

As you are depending on asynchronous checking you cannot return a boolean.

It however looks like you could just simply do

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

I'm no expert on Observable yet, but it would also be easy for you to chain on a call to redirect if you where not authorised.

score 0 · Accepted Answer · answered Nov 25 '16 at 13:11

0

Here is the solution that works for me:

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

answered Nov 25 '16 at 13:11

Majesty

2,097
5
24
55

Angular2: canActivate

3 Answers3