How to restrict access to Login Route if user is already logged in in Angular 4?

Question

I have successfully implement AuthGuardService which restrict access to a protected route if user is not logged in.

What I am trying to achieve is, if user is already logged in and accessed the Login Route, I want it to redirect to another route like homepage.

Answer 1

You can create two CanActivate guard:
- For restricting routes for already loggedIn users (eg: /login, /register etc)
- For restricting routes for not loggedIn users (eg: /dashboard)

Auth Service

loggedIn() {
    //return boolean for loggedIn user logic
}

Guard for not loggedIn Users

import { Injectable } from "@angular/core";
import { CanActivate, Router } from "@angular/router";
import { AuthService } from './auth.service';

@Injectable()
export class AuthGuard implements CanActivate {

    constructor(private _authService: AuthService, private _router: Router) { }

    canActivate(): boolean {
        if (this._authService.loggedIn()) {
            return true;
        } else {
            this._router.navigate(['/login'])
            return false
        }
    }
}

Guard for loggedIn Users

import { Injectable } from "@angular/core";
import { CanActivate, Router } from "@angular/router";
import { AuthService } from './auth.service';

@Injectable()
export class LoggedInAuthGuard implements CanActivate {

    constructor(private _authService: AuthService, private _router: Router) { }

    canActivate(): boolean {
        if (this._authService.loggedIn()) {
            this._router.navigate(['/dashboard'])
            return false
        } else {
            return true
        }
    }
}

Register AuthGuard in App Module

...
providers:[AuthGuard,LoggedInAuthGuard]
...

Add AuthGuard in Routing Module

const routes: Route[] = [
  { path: "/login", component: LoginComponent, canActivate:[LoggedInAuthGuard] },
  { path: "/dashboard, component: DashboardComponent, canActivate: [AuthGuard]}
]

Answer 2

You could perform a simple check in the ngOnInit of the login component like so and redirect to another page of your choice if they are authenticated already:

ngOnInit() {
   if (this._authService.isLoggedIn) {
      this._router.navigate(['/apps']);
   }
}

That worked for me!