condition on Angular routing

Question

firstly, if first user already login in first tab and it will redirect to dashboard, when first user open second tab in same browser(paste login Url), automatically it will redirect to dashboard without going to login page.I had condition where in the login page there are specific routes that unauthenticated user can access,

login.component.ts

linkToMarket(): void {
    this.sidenav.close().then(() => {
        this.router.navigate([UrlConstants.Market]);
    });
}

on Market page (in second tab),user can return back to login page, but unfortunately it will redirect through dashboard (because first user already logged in) as I implemented this [redirect to dashboard if user is logged in][1], how can I make sure if there are differrent user on second tab, when return from market page, it will not redirect to dashboard but login page, whether I can make condition on route or use Authguard(CanActivate) ?

detail.login component

ngOnInit(): void {
    if (this.authenService.isUserAuthenticated()) {
        this.router.navigate([UrlConstants.UserSetting])
    }
}

market.component.ts

linkToSignIn(): void {
    this.router.navigate([UrlConstants.Login], { queryParams: { returnUrl: UrlConstants.Market } });
    if (this.authenService.isUserAuthenticated()) {
        this.router.navigate([UrlConstants.Login])
    }
}


[1]: https://stackguides.com/questions/44121164/angular-2-redirect-if-user-is-logged-in

Different User? you have to maintain some sort of front end session, cookies, localStorage, etc. If its a different user then clearly the session for the first user is destroyed. How do you know it's a different user? — Ashish Ranjan
Angular applications run in a single user's browser. Are you saying that you have multiple users using one computer/browser? Or are you referring to different users on different computers? — DeborahK

DeborahK DeborahK · Accepted Answer · 2018-12-07T09:33:11

I don't understand regarding the first and second user in your question.

But in general, to protect certain routes that require a log in, use a route guard. One of the key purposes of a route guard is to ensure that someone does not access a route unless they meet specific criteria (such as a log in).

Here is an example of one of my auth guards:

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

import { Observable } from 'rxjs';

import { AuthService } from './auth.service';

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate, CanLoad {

  constructor(private authService: AuthService,
              private router: Router) { }

  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
    return this.checkLoggedIn(state.url);
  }

  checkLoggedIn(url: string): boolean {
    if (this.authService.isLoggedIn) {
      return true;
    }

    // Retain the attempted URL for redirection
    this.authService.redirectUrl = url;
    this.router.navigate(['/login']);
    return false;
  }

}

You then attach the guard to the route on the route configuration:

  {
    path: 'products',
    loadChildren: './products/product.module#ProductModule',
    canActivate: [AuthGuard],
    data: { preload: false },
  },

Is this what you are asking?

condition on Angular routing

1 Answers