How to protect route in angular4

Question

I have Login/Create Account in My application. I want the user will not be able to see login/create account if user is already logged in. I am using an Authguard to protect the route:

@Injectable()
export class AuthGuard implements CanActivate {

    constructor(private router: Router) { }

    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {debugger;
        if (localStorage.getItem('UserLoggedIn')) {
            // logged in so return true
            this.router.navigate(['']);
            return true;
        }

        // not logged in so redirect to login page with the return url
         this.router.navigate(['login']);
         return false;
    }

In this case the page is going in infinite loop.

This is my Routes:

const appRoutes: Routes = [
  { path: '', component: HomeComponent , data: { animation: '' }},
  { path: 'login', component: UserloginComponent , data: { animation: 'login' },canActivate:[AuthGuard]},
  { path: 'create-account', component: CreateAccountComponent, data: { animation: 'create-account' } },
  { path: 'forgot-password', component: ForgotPasswordComponent, data: { animation: 'forgot-password' } },
  { path: '**', component: PageNotfoundComponent }
];

Please Help. I want it for login and create account.

score 1 · Answer 1 · answered Feb 13 '18 at 13:52

1

It is because you added this.router.navigate(['login']); to your authguard and this authguard was attached to login route. Each time a route was accessed it always call all the guards that was attached. So in your case if you access login, it will infinitely redirect to login. There are many ways to solve your issue. If you are intending to add the guard on the login route, just remove this.router.navigate(['login']); to avoid infinite loop. But i suggest to add the guard only to those routes you want to protect being accessed at if the user is not logged in.

answered Feb 13 '18 at 13:52

Voltaire John Secondes Biton

702
1
9
24

If I didn't add guard on the route then it will go to that component and then check whether the user is logged in or not if logged in then redirect back to home page. Is it a good approach to protect the page? – Ayoush Kohli Feb 13 '18 at 14:28
you should do the reverse. put your guard on all of your secure routes(all routes that can only be accessed if logged in) and redirect them to login page if not logged in. – Voltaire John Secondes Biton Feb 13 '18 at 14:38
What if the user is logged in and type the login page url in the URL then there is no protection on that page and the user will redirect on that page. As the user is logged in still the page is accessible. Isn't it wrong.So my concern is that if the user is already logged in so they cannot access the login page or create account page again. – Ayoush Kohli Feb 13 '18 at 15:22
you can create a separate guard for that purpose. or the other way around is to use your existing guard and trigger the redirect to login route if it is not equal to login. i.e. `this.router.url !== '/login'` – Voltaire John Secondes Biton Feb 13 '18 at 15:30

score 0 · Answer 2 · answered Feb 13 '18 at 13:37

Try this:

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {debugger;

        let redirect: boolean = false;

        if (localStorage.getItem('UserLoggedIn')) {
            // logged in so return true
            this.router.navigate(['']);
            redirect = true;
        } else {
            // not logged in so redirect to login page with the return url
            this.router.navigate(['login']);
            redirect =  false;
        }


        return redirect;

    }

It is also working as my code working. In this case also the page is going in infinite loop. — Ayoush Kohli, Feb 13 '18 at 13:43

How to protect route in angular4

2 Answers2