Disabling the Angular router link

Question

Disabling the Angular router link

I'm currently working on an Angular application that utilizes routing and auth guards.

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-10 col-md-8 col-sm-offset-1 col-md-offset-2">
      <ul class="nav nav-tabs">
        <li role="presentation" routerLinkActive="active"
        [routerLinkActiveOptions]="{exact:true}"><a routerLink="/">Home</a></li>
        <li role="presentation" routerLinkActive="active"><a routerLink="/servers">Servers</a></li>
        <div *ngIf="showUser">
        <li role="presentation" routerLinkActive="active"><a routerLink="/users">Users</a></li>
        </div>
      </ul>
    </div>
  </div>
  <div class="row">
    <div class="col-xs-12 col-sm-10 col-md-8 col-sm-offset-1 col-md-offset-2">
      <router-outlet></router-outlet>
    </div>
  </div>

The code above includes an if condition to control the visibility of a tab:

        <div *ngIf="showUser">
        <li role="presentation" routerLinkActive="active"><a routerLink="/users">Users</a></li>
        </div>

This tab will only be shown if the variable showUser is true. Otherwise, it will not appear in the home page.

Check out the TypeScript file (TS) here:

export class AppComponent{
  showUser : boolean = true;

  ngOnInit() {
    this.showUser = false;
  }
}

In this example, I've manually set this.showUser as false. In a real-world application, this value would typically depend on certain conditions, like:

  ngOnInit() {
    let user = this.localStorage.getItem('user');
    if(user.value == null || user.value == undefined) {
       this.showUser = false;
     }
  }

Therefore, the user menu will only display if the condition is true.

However, there is an issue where changing the URL to include /users leads to a redirection to the users page:

https://routing-angular-bjbjqd.stackblitz.io/users

My goal is to prevent this from happening unless the showUser condition is met.

How can I ensure that the URL does not change unless showUser is true?

angular typescript angular6 angular-routing auth-guard

Answer 1

Answer №1

To successfully manage this operation, it is essential to regulate access through UserGuard.

Start by defining the showUser variable as a global variable using localStorage

localStorage.setItem('showUser', true|false);

Next, retrieve the data from localStorage in the guard and carefully examine each attempt to access the specified path

@Injectable()
class UserGuard implements CanActivate {
  constructor() {}

  canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<boolean|UrlTree>|Promise<boolean|UrlTree>|boolean|UrlTree {
    return localStorage.getItem('showUser');
  }
}

This guideline should facilitate your understanding and implementation process

Answer 2

To successfully manage this operation, it is essential to regulate access through UserGuard.

Start by defining the showUser variable as a global variable using localStorage

localStorage.setItem('showUser', true|false);

Next, retrieve the data from localStorage in the guard and carefully examine each attempt to access the specified path

@Injectable()
class UserGuard implements CanActivate {
  constructor() {}

  canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<boolean|UrlTree>|Promise<boolean|UrlTree>|boolean|UrlTree {
    return localStorage.getItem('showUser');
  }
}

This guideline should facilitate your understanding and implementation process

Answer 3

Answer №2

To fully meet your requirements, relying solely on the Auth guard may not be sufficient. Consider implementing admin guards or User Specific guards in your application.

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

@Injectable()
export class UserGuard implements CanActivate, CanActivateChild, CanLoad {
    userType: string;
    constructor(private router: Router) { }

    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
        let url: string = state.url;
        return this.checkLogin(url);
    }

    canActivateChild(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
        return this.canActivate(route, state);
    }

    canLoad(route: Route): boolean {
        let url = `/${route.path}`;
        return this.checkLogin(url);
    }

    checkLogin(url: string): boolean {
        this.userType = sessionStorage.getItem('userType'); // Verify user type here
        if (this.userType === "user") {
            return true;
        }
    }
}

Define routing as follows:

{ path: 'user', component: UserComponent, canActivate: [AuthGuard, UserGuard] }

Answer 4

To fully meet your requirements, relying solely on the Auth guard may not be sufficient. Consider implementing admin guards or User Specific guards in your application.

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

@Injectable()
export class UserGuard implements CanActivate, CanActivateChild, CanLoad {
    userType: string;
    constructor(private router: Router) { }

    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
        let url: string = state.url;
        return this.checkLogin(url);
    }

    canActivateChild(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
        return this.canActivate(route, state);
    }

    canLoad(route: Route): boolean {
        let url = `/${route.path}`;
        return this.checkLogin(url);
    }

    checkLogin(url: string): boolean {
        this.userType = sessionStorage.getItem('userType'); // Verify user type here
        if (this.userType === "user") {
            return true;
        }
    }
}

Define routing as follows:

{ path: 'user', component: UserComponent, canActivate: [AuthGuard, UserGuard] }

Disabling the Angular router link

Answer №1

Answer №2

Similar questions

The Date object in Typescript is represented as a string

What criteria does Angular use to determine when the aot compiler should be utilized?

Can someone point me to the typescript build option in Visual Studio 2019 Community edition?

What is the best way to store items in localStorage within Angular version 4.4.6?

"An error occurred: Uncaught SyntaxError - The import statement can only be used within a module. Including a TypeScript file into a

What is the ideal way to name the attribute labeled as 'name'?

The ActionsSubject from ngrx does not properly finalize when used in a modal dialog box

Unfortunately, an exception was encountered: ES Module must be loaded using the import statement

Utilizing objects as values with `react-hook-form`

Converting and Casting Enums in TypeScript

Unable to cache new entry at the specified location (/Users/android/.gradle/7.5.1/checksums/sha1-checksums.bin) due to a java.io.IOException with the message "Bad file descriptor"

Tips for effectively utilizing react-test-renderer/shallow in a TypeScript environment

What is the process for removing an item from a JSON file using an HTTP DELETE request in a Node.js environment?

I am encountering difficulties while attempting to import Typescript files. Upon compiling them into Javascript, I am faced with errors in the web browser, specifically the issue of "exports is not defined"

Highcharts, put a halt to the dynamic spline graph rendering

Dynamic Variable Translation in Angular 8 using i18n

Does the onAuthStateChanged listener in firebase trigger immediately upon user login or logout?

Angular2 with Typescript is raising concerns over the absence of specific data types in

Different Ways to Validate Angular 2 FormGroups

Passing images to Angular components