How to do authentication for pages using angular2 and typescript

Question

i have a login page and 3 more pages along with that. Now i need to do authentication function. If the authentication is undefined then it must redirected to login page, if authentication is true it must go to checkLogin function. I am not getting how to do this but i had tried in this way,in one of the pages.

ts:

import { Router, CanActivate } from '@angular/router';

@Injectable()
export class PageComponent implements CanActivate {

    constructor(private router: Router) { }

    canActivate() {
      if (localStorage.getItem('authToken') == undefined ) {
        this.router.navigate(['/login']);
      }
      else {
            /*Checklogin*/    
        this.ApiService
            .checklogin()
            .subscribe(
              user  => {}
      }
        }

but i get an error:

Class 'PageComponent' incorrectly implements interface 'CanActivate'.
  Types of property 'canActivate' are incompatible.
    Type '() => void' is not assignable to type '(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) => boolean | Observable<boolean> | Pr...'.
      Type 'void' is not assignable to type 'boolean | Observable<boolean> | Promise<boolean>'.

I dont know what i am doing is correct or not, can anyone guide me

i have no idea how to do, i was trying this way, please can you suggest me how to do — Bhrungarajni, Dec 20 '17 at 04:17
`canActivate()` **must** return a value. https://stackoverflow.com/questions/43487827/how-to-apply-canactivate-guard-on-all-the-routes — Thanh Nguyen, Dec 20 '17 at 04:24

score 0 · Answer 1 · answered Dec 20 '17 at 04:29

0

You have to return boolean or Observable<boolean> or Promise<boolean> from canActivate

Also

canActivate should be something like this

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot){
    //Your logic
}

Example

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot){
    if (localStorage.getItem('authToken') == undefined ) {
        return false; 
    }
  else {    
    return new Observable<boolean>((observer)=>{
        this.ApiService
        .checklogin()
        .subscribe((res)=>{
           //Check user
           if(condition){
              observer.next(true);
           }
           else{
             observer.next(false);
           }
           observer.complete();
        });
   });
  }

}

answered Dec 20 '17 at 04:29

Deepak Kumar T P

1,076
10
20

Thanks for the response, i should write this function in other pages right? – Bhrungarajni Dec 20 '17 at 04:31
Actually you should use canActivate with classes than components check this example https://scotch.io/courses/routing-angular-2-applications/canactivate-and-canactivatechild – Deepak Kumar T P Dec 20 '17 at 04:34
ya i will check, is there any other way for doing authentication, other than this method? – Bhrungarajni Dec 20 '17 at 04:38

score 0 · Answer 2 · answered Dec 20 '17 at 04:31

CanActivate route guard expect a boolean, Observable or a Promise to be returned. Based on the value returned the page is authenticated.

In your case you can probably do something like this.

canActivate() {
  if (localStorage.getItem('authToken') == undefined ) {
    return false;
  }
  else {  
         return this.ApiService.checklogin()
      }
    }

In the implementation of checklogin you resolve/reject you promise/observable.

You can go through following article: https://ryanchenkie.com/angular-authentication-using-route-guards

Thanks for the response, i will try and update you @Amal – Bhrungarajni Dec 20 '17 at 04:32 — Bhrungarajni, Dec 20 '17 at 04:32

How to do authentication for pages using angular2 and typescript

2 Answers2