Deactivation of angular router link

Question

I am making angular application, where i am using routing and auth guard..

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

In the above code that i have made a if condition,

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

Show if showUser is false, then he cannot view the user tab in the home page..

TS:

export class AppComponent{
  showUser : boolean = true;

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

Here i have hard coded this.showUser as false, whereas in real application , it will be based on some condition like,

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

So the condition is false and hence the user menu not showing in view..

But if i change the url like

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

See carefully i have added users at the last.. The above is redirecting to users page..

My requirement is it should not happen.

Because unless the condition is true it should not get redirected to users page.

How to prevent the url change unless showUser is true?

check this bro https://stackblitz.com/edit/routing-angular-rdap7l — Chellappan வ, Dec 10 '18 at 13:00
@Chellappan, Bro even though the user is logged in, he cannot access the ```users``` url.. Only based on this condition ```if(user.value == null || user.value == undefined) { this.showUser = false; }``` we can make restriction and not by ```loggedIn```.. — Maniraj Murugan, Dec 10 '18 at 13:18
Bro if you want to activate then you need to return true to the can activate method — Chellappan வ, Dec 10 '18 at 14:42
Okay bro thanks... Post it as answer bro.., I will accept it.. — Maniraj Murugan, Dec 10 '18 at 15:20

Antonio de la mata · Answer 1 · 2018-12-11T11:01:30.290

You must control this perform from UserGuard.

First, set showUser variable as global variable trought localStorage

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

Second, get localStorage in the guard and review each try to access the path

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

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

I hope it helps

score 0 · Answer 2 · answered Dec 10 '18 at 12:31

Auth guard is not enough to complete your requirement. You need to use admin guards or User Specific guard to implement this.

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'); // check usertype here
        if (this.userType === "user") {
            return true;
        }
    }
}

Define routing like this:

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

Deactivation of angular router link

2 Answers2

Linked