Angular2: Prevent authenticated users from accessing specific routes

Question

I defined some routes in my main.ts file:

 const routes: RouterConfig = [ { path: '', component: HomeComponent }, { path: '', redirectTo: 'home', terminal: true }, { path: 'dashboard', component: DashboardComponent, canActivate: [LoggedInGuard] }, { path: 'login', component: LoginComponent }, { path: 'about', component: AboutComponent } ]; 

After a successful login, I want my authenticated users to be able to use specific routes (e.g. dashboard ). And without logging in, they cannot access the dashboard , but they will be able to visit , at home, logging in

I managed to restrict users going through the dashboard without logging in using CanActivate .

 canActivate(): boolean { if (this.authService.isLoggedIn()) { return true; } this.router.navigateByUrl('/login'); return false; } 

But using these routes and the CanActivate approach after a successful login, users can also use routes such as login , home . How can I prevent this?

NB I am using angular2 RC4.

Answer 1

I did some research to see if you can “deny” the guard, but it looks like you need to make another guard, which is the opposite of your guard. For instance:

 import { Injectable } from '@angular/core'; import { CanActivate } from '@angular/router'; import { AuthService } from './your-auth.service'; @Injectable() export class PreventLoggedInAccess implements CanActivate { constructor(private authService: AuthService) {} canActivate() { return !this.authService.isLoggedIn(); } } 

Add it to your boot function and you are all set. You just need to do in your routes:

 { path: 'login', component: LoginComponent, canActivate: [PreventLoggedInAccess] }, 

Answer 2

You can write a guard as follows:

 import { Injectable } from '@angular/core'; import { ActivatedRouteSnapshot, CanActivate, RouterStateSnapshot } from '@angular/router'; import { AuthService } from './your-auth.service'; @Injectable() export class UserAccessGuard implements CanActivate { constructor(private authService: AuthService) { } canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean { return route.data['onlyGuests'] != authService.isAuthenticated(); } } 

And then use it in determining the route:

 const routes: Routes = [ { path: '', redirectTo: 'home' }, // accessible only to guests { path: '', component: HomeComponent, data: { onlyGuests: true }, canActivate: [ UserAccessGuard ] }, { path: 'login', component: LoginComponent, data: { onlyGuests: true }, canActivate: [ UserAccessGuard ] }, // accessible only to authenticated users { path: 'dashboard', component: DashboardComponent, canActivate: [ UserAccessGuard ] } ]; 

Answer 3

Make the file name ts auth.guard.ts enter the following code into

Enter security code

 import { Injectable } from '@angular/core'; import { Router, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router'; @Injectable() export class AuthGuard implements CanActivate { constructor(private router: Router) { } canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) { if (localStorage.getItem('currentUser')) { // logged in so return true return true; } // not logged in so redirect to login page with the return url this.router.navigate(['/login'], { queryParams: { returnUrl: state.url }}); return false; } } 

Add the following code to the ts routing file

application-routing.module.ts

 { path: 'user', component: UserComponent,canActivate: [AuthGuard] , children: [{ path: 'home', component: HomeComponent }, { path: 'view/:id', component: UserViewComponent }, { path: 'add', component: UserAddComponent }, { path: 'edit/:id', component: UserAddComponent } ] }, 

Add providers to the app.module.ts file

app.module.ts

 @NgModule({ declarations: [ AppComponent -------- ], imports: [ BrowserModule -------- ], providers: [ AuthGuard ], bootstrap: [AppComponent] })