Using subscription in router can activate in angular2/4 fails

Question

Am trying to guard my routes but am getting an error that

Type 'Subscription' is not assignable to type 'boolean 
     | Promise<boolean> | Observable<any>'

so in the route guard have

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<any> | Promise<boolean> | boolean {
     return this._authService.checkLoggedin().subscribe((res)=>{
     if(!res){
        console.log("res is not here..")
      }
      return res;

    },(err)=>{

     console.log("error is", err);
  })
 }

So my authservice i have

  checkLoggedin(): Observable<any> {
    if (!this._accesstokenService.getToken('access_token')) {
      return Observable.of(false); //just checks for localstorage
     }
      //if the access token exists  validate it on the server
    return this._http.post(this.authurl + 'auth/is-loggedin', 1)
      .map((res) => {
       return Observable.of(res);
      });
 }

Where am i going wrong. I would still like to continue using the observable from checkloggedin method

score 2 · Accepted Answer · answered Jan 15 '18 at 03:34

2

You need to return an observable not a subscription in your canActivate

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<any> | Promise<boolean> | boolean {
     return this._authService.checkLoggedin();
 }

Your return signature dictates it so, but if I were you I would make it return a boolean and keep it simple.

answered Jan 15 '18 at 03:34

Mike Tung

4,735
1
17
24

But returning a promise wount that make it synchronous in the event where its validating the access token on the server – Geoff Jan 15 '18 at 03:41
Where did you get promise from? Observables aren't promises – Mike Tung Jan 15 '18 at 03:42
Observables work just like promises see this: https://stackoverflow.com/questions/37364973/angular-promise-vs-observable they are used for asynchronous activities – Geoff Jan 15 '18 at 03:45
Am trying to get the result of checkLoggedin which returns an observable which in the canactivate am unable to get the result which in that case i had to subscribe to the result of the checkloggedin Observable but then fails – Geoff Jan 15 '18 at 03:48
What's the issue? Also observables can do a lot more than promises. So my question was why would your service method return a promise? – Mike Tung Jan 15 '18 at 03:49
the reason why it returns a promise is because of the http part which queries the server to check if the access token is a valid one or not. – Geoff Jan 15 '18 at 03:52
if you are using the angular `httpClient` it returns an Observable. – Mike Tung Jan 15 '18 at 03:52
Exactly it does return an observable, from rxjs doesnt it mean that when extracting data from an obsevable youll need to subscribe to it. Or can i extract data without subscribing? – Geoff Jan 15 '18 at 03:54
You do realize, that angular can subscribe to the observable on its own right? – Mike Tung Jan 15 '18 at 03:56
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/163162/discussion-between-geoffrey-mwangi-and-mike-tung). – Geoff Jan 15 '18 at 03:56
Hey @GEOFFREYMWANGI did you come up with any solution for this problem, I am facing similar issue. – Asif Karim Bherani Feb 24 '18 at 00:38

Using subscription in router can activate in angular2/4 fails

1 Answers1