3

I am using Angular v6, I have implement redirect from dashboard to login page if user is not logged in.
I'm confused between the two options:

  1. Add a login guard file to check login status and redirect to dashboard
  2. Detect route changing event, check login status here and redirect

What is the better solution for this case ?

dangquang1020
  • 496
  • 3
  • 7
  • 23

2 Answers2

6

Use Authentication Guard in your routing module It will make things easy for you to check whether a user is login or not

For a better understanding of Auth Guard here are some links that might help you :

http://jasonwatmore.com/post/2018/05/23/angular-6-jwt-authentication-example-tutorial

How to use angular 6 Route Auth Guards for all routes Root and Child Routes?

https://medium.com/@ryanchenkie_40935/angular-authentication-using-route-guards-bf7a4ca13ae3

https://scotch.io/courses/routing-angular-2-applications/canactivate-and-canactivatechild

Here is my code that I used in my project!

In-app module file I used auth guard like this :

const ROUTES = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: 'login', component: LoginComponent },
  { path: 'register', component: RegisterComponent },
  { path: 'home', component: HomeComponent },
  { path: 'books', component: BookComponent,canActivate:[AuthGuardService] },
  { path: 'book-details/:id', component: BookDetailComponent,canActivate:[AuthGuardService] },
  { path: 'book-create', component: BookCreateComponent,canActivate:[AuthGuardService] },
];

And here is my auth guard service :

import { Injectable } from '@angular/core';
import { Router, CanActivate } from '@angular/router';


@Injectable()
export class AuthGuardService implements CanActivate {

    constructor( public router: Router) { }

    canActivate(): boolean {

        if (sessionStorage.getItem('id') == null) {
            this.router.navigate(['home']);
            return false;
        }
        return true;
    }
}

This is how you can implement auth guard in your code.

lazzy_ms
  • 1,169
  • 2
  • 18
  • 40
Aarsh
  • 2,555
  • 1
  • 14
  • 32
  • 1
    https://meta.stackexchange.com/questions/8231/are-answers-that-just-contain-links-elsewhere-really-good-answers – Carsten Jun 21 '18 at 04:37
  • Yahh you are right providing some example for that in few minutes ! – Aarsh Jun 21 '18 at 04:39
  • Thank you for your answer, I have implemented auth guard on home route. But if you are logged in, and go back to login page. How can I redirect back to home page ? – dangquang1020 Jun 21 '18 at 04:56
  • 1
    this.router.url === '/login' Put else if condition in auth guard for this. check whether you are logged in and again visiting login page or not. Or you can use location service to get url. – Aarsh Jun 21 '18 at 05:06
  • 1
    Thank so much, I use ngOnInit of login module to check it. – dangquang1020 Jun 21 '18 at 06:41
2

Using guard is good option.

Please check link

http://jasonwatmore.com/post/2018/05/16/angular-6-user-registration-and-login-example-tutorial

IftekharDani
  • 3,619
  • 1
  • 16
  • 21