python ruby-programming-language Smalltalk Vue.js Knockoutjs TypeScript JavaScript, OOPs JavaScript Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 4 Angular 2 AngularJs 1.x NodeJs Perl Programming R Programming RequireJs Rust Programming Backbonejs closure programming language go-programming-language kotlin-programming-language
Angular 4

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”.

const APPROUTES: 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]
})
export class 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()
export class AuthGuard implements CanActivate {

  //constructor initialization
  constructor(private authService: AuthServiceService,   private route: Router){  }

  //can Activate Route
  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
      if(this.authService.isLoggednIn()){
        this.route.navigate(["user"]);
        return true;
      }else{
        return false;
      }
  }
}

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!!
ANIL SINGH

Hey! I'm Anil Singh. I author this blog. I'm Active Blogger, Programmer. I love learning new technologies, programming, blogging and participating the forum discussions more...
My Blogs - http://code-sample.com and http://code-sample.xyz
My Books - Interview Questions and Answers Books- Get Your Book in 15+ Digital Stores Worldwide..

You Might Also Like
www.code-sample.com/. Powered by Blogger.
ASK Questions