Angular 6 authorization

Question

If user is not logged in and tries to access any secure URL it should not allow him to access and must redirect to login page even if it's directly access via URL bar of browser.

I found one solution over here which resolved my problem, But only thing is whenever user tries to access authorize URL from URL bar of browser it renders index.html and nav bar components contents.

Have you tried using `canActivate` in your routes? Option-2 in the reference answer which you have provided. — Jignesh M. Khatri, Oct 05 '18 at 05:08
Yes i tried option 2 which is working nicely, but problem is if user tries to access via hitting URL bar of browser at that time it rendering app component contents for 1 to 2 seconds and after that it automatically redirects to login page. so my concern is i dont want to show app component page if user is not logged in — Rahul Mistry, Oct 05 '18 at 05:10
check if the user is logged in or not and use `*ngIf` to render the rest of the component — Exterminator, Oct 05 '18 at 05:30

score 0 · Answer 1 · answered Oct 05 '18 at 05:28

0

You should try canActivate. It will identify user loged-in and based on enable routes. Below is example. Create ts file for below.

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

@Injectable()
export class UserAuthorised implements CanActivate {

   constructor(private router: Router) { }

   canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
      if (your condition here of if login true) {
         return true;
      } else {
         //redirect to login page.
         this.router.navigate(['/login']);
         return false;
      }
   }
}

Add above entry into list of providers in app.module.ts file. Now this class reference you need to give in routes file.

{ path: 'dashboard', component: DashboardComponent, canActivate: [UserAuthorised] },

What above will do : If user tries to access url directly routes will return false and redirect user to login page.

answered Oct 05 '18 at 05:28

Shabbir Dhangot

8,954
10
58
80

I already did this, but what if user tries to access via URL at that time it rendering app component and after 1 to 2 seconds it redirects to login. How to prevent app component rendering if user is not loged in? – Rahul Mistry Oct 05 '18 at 05:40
I think you are misunderstanding concept here. App component will going to load in every case as its root component. AppComponent reference is given in the index file something like . You have to load other components based on the routes. – Shabbir Dhangot Oct 05 '18 at 05:51
Appcomponent referance is given in index file, but whenever route changes it wont call app component every time. App component will load once or until page refresh – Rahul Mistry Oct 05 '18 at 06:45
Correct. As you describe "if user tries via URL" .this will reload page and render app component. – Shabbir Dhangot Oct 05 '18 at 08:26
Thanks @Shabbir. your last sentence is my solution. I checked user is loged in or not in App component ngOnIt method and based on that put ngIf condition in html side so it wont display any content and after 2 second it automatically redirect by showing blank page. – Rahul Mistry Oct 05 '18 at 12:37

Angular 6 authorization

1 Answers1