Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Angular 5 Redirect if not logged in - CanActivate AuthGuard

In this article, I will discuss how to Redirect one page to other page and also discuss how to use the AuthGuard and Canactivate in Angular 5 applications.

Three options are available to redirect page in Angular 5 –
1.      Imperatively redirect the user in AppComponent
2.      Use the route data property
3.      Use a CanActivate guard

The AuthGuard should call an application service that can login a user and retain information about the current user.

Options 1 – Imperatively redirect the user in AppComponent
@Component({
  selector: 'app-root',
  template: `.....`
})
export class AppComponent {
  constructor(private _authService: AuthService, _router: Router) {
    if (_authService.isLoggedIn()) {
      _router.navigate(['user']);
    }
  }
}
This is not good practice and I will not recommend using this options.

Options 2 - Use the route data property
This is the best solution and used by many expert programmers. You can simply add some metadata in the routes declaration to indicate that - “this route requires that the user must be loggedIn”.

constAPPROUTES: Routes= [
    {path: 'dashboard', component: AppComponent, data:{requiresLogin:true}},
    {path: 'user', component: UserComponent, data:{requiresLogin:true}}
];
This is the best approach to redirect if not logged in and I will recommend to this option.

Options 3 -Use a CanActivate guard
Firstly add a CanActivate guard to all the routes that require the user to be logged in and my guard is called AuthGuard and see the following example –

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    UserComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpClientModule,
    RouterModule.forRoot([
      { path: '', component: AppComponent, pathMatch: 'full', canActivate: [AuthGuard]},
      { path: 'user', component: UserComponent, canActivate: [AuthGuard]},
      { path: 'login', component: LoginComponent}])
  ],
  providers: [EmployeeService, ValidationService,
          AuthenticationService, UserService],
  bootstrap: [AppComponent]
})
exportclass AppModule{ }


And
import{ Injectable } from'@angular/core';
import{ CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot} from '@angular/router';
import{ Observable } from'rxjs/Observable';
import{Router} from'@angular/router';
import{ AuthServiceService} from './auth-service.service';

@Injectable()
exportclass AuthGuardimplements CanActivate{

  //constructor initialization
  constructor(privateauthService: AuthServiceService,   privateroute: Router){  }

  //can Activate Route
  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observableboolean> | Promiseboolean> | boolean {
      if(this.authService.isLoggednIn()){
        this.route.navigate(["user"]);
        returntrue;
      }else{
        returnfalse;
      }
  }
}

This is also best approach to redirect if not logged in and this one is also recommend to this option.
I hope you are enjoying with this post! Please share with you friends! Thank you!!

Share the post

Angular 5 Redirect if not logged in - CanActivate AuthGuard

×

Subscribe to Angular 2 Javascript Asp.net C# Sql Server Knockoutjs Angularjs Kendo Ui Html 5 Web Api Wpf Wcf Etc.

Get updates delivered right to your inbox!

Thank you for your subscription

×