Деактивация углового роутера

Question

Я делаю угловое приложение, где я использую маршрутизацию и аутентификацию.

stackblitz

компонент приложения html

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

В приведенном выше коде, который я создал , если условие,

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

Показать, если showUser ложно, то он не может просматривать вкладку пользователя вдомашняя страница ..

TS :

export class AppComponent{
  showUser : boolean = true;

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

Здесь я жестко закодировал this.showUser как ложное, тогда как в реальном приложении оно будет основано на некотором условиикак,

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

Таким образом, условие ложно, и, следовательно, пользовательское меню не отображается в виде ..

Но если я изменяю URL, как

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

Смотри внимательно, я добавил пользователей в последний раз .. Выше перенаправление на страницу пользователей ..

Мое требование - это не должно происходить.

Потому что, если условие не выполняется, оно не должно перенаправляться на страницу пользователей.

Как предотвратить изменение URL-адреса, если showUser не является истинным?

Answer 1

Вы должны управлять этим исполнением из UserGuard.

Во-первых, установите переменную showUser в качестве глобальной переменной trought localStorage

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

Во-вторых, получите localStorage в защите и просматривайте каждую попытку доступа к пути

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

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

Iнадеюсь, это поможет

Answer 2

Auth Guard недостаточно для выполнения вашего требования.Для этого вам необходимо использовать административную защиту или пользовательскую защиту.

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

Определите маршрутизацию следующим образом:

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