Angular 2 Perform Login Authentication (i am getting into infinite loop.)

Question

I am trying to create a website backend for which I need User Authentication in Angular 2. But I am unable to resolve some of issue, this is what I am doing.

This is my routing file.

const appRoutes: Routes = [
 {
   path: 'admin',
   component: AdminloginComponent,
   canActivate: [LoggedInGuard]
 },
 {
   path: '',
   component: HomepageComponent
 },
 {
   path: '**',
   component: OurservicesComponent
 },
];

This is my gaurd file: // after successfull login i am setting is_logged_in in local storage.

import { Injectable } from '@angular/core';
import { Router, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
@Injectable()
export class LoggedInGuard implements CanActivate {
 constructor(private router: Router) { }

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
  if(localStorage.getItem("is_logged_in"))
  {
      this.router.navigate(['/admin/dashboard']);
      return true;
  }
  return false;
}

}

** My issue is that when the url is /admin canActivate comes into action and if I get local storage I am navigating to admin/dashboard.

But if user is logged out then in this case on /admin their should be loginform, but if I navigate to /admin if not logged in then it comes into canActivate and again their is nothing in local storage so it goes to admin and so on. So what is the correct way to solve this.

Thanks in advance.

score 1 · Accepted Answer · answered Apr 25 '17 at 05:34

1

It unclear what exactly you try to accomplish, but redirect with router.navigate should go with return false;, not with return true;

Either

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    if(localStorage.getItem("is_logged_in")) {
      return true;
    }
    this.router.navigate(['/admin/dashboard']);
    return false;
  }

or

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    if(localStorage.getItem("is_logged_in")) {
      this.router.navigate(['/admin/dashboard']);
      return false;
    }
    return true;
  }

answered Apr 25 '17 at 05:34

Günter Zöchbauer

623,577
216
2,003
1,567

Hi Gunter.. Thanks for replying, actually i want login authentication in angular2 I found that we should use CanActivate for this. I followed http://stackoverflow.com/questions/34331478/angular2-redirect-to-login-page ,, but in this everybody is using canactivate on path: '' ", but I think it should be on /admin . Is this is wrong – Narendra Vyas Apr 25 '17 at 05:46
Will be possible for you to provide some ref. Thanks in adv. – Narendra Vyas Apr 25 '17 at 05:46
Ref about what? It's just inconsistent. If you return `true` you communicate that it's OK to continue navigation, but at the same time you navigate away, but the alternative option you do nothing but signal that continue navigation should be prevented. – Günter Zöchbauer Apr 25 '17 at 05:52
Hi can you please help me in this issue: http://stackoverflow.com/questions/43738965/getting-errors-on-ng-serve . Thanks in advance – Narendra Vyas May 02 '17 at 13:24

Angular 2 Perform Login Authentication (i am getting into infinite loop.)

1 Answers1