Question

我正在做角度应用程序，在这里我使用路由和身份验证保护。.

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

在上面的代码中，我已经创建了 if 条件，

        <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硬编码为false，而在实际应用中，它将基于某些条件，例如

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

因此条件为假，因此用户菜单未在视图中显示。.

但是，如果我将网址更改为

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

请仔细查看，我最后一次添加了用户。以上内容已重定向到用户页面。

我的要求是不应该发生。

因为除非条件为真，否则不应将其重定向到用户页面。

除非showUser为真，如何防止url更改？

Answer 1

Auth Guard不足以完成您的要求。您需要使用管理员防护或特定于用户的防护来实现此目的。

Receiver receiver = new MyReceiverImplementation();
JChannel jChannel = new JChannel().connect("clusterName").receiver(receiver);

这样定义路由：

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

Answer 2

您必须从UserGuard控制此表演。

首先，将showUser变量设置为全局变量而不是localStorage

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

第二，获得本地存储，并检查每次尝试访问路径的尝试

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

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

我希望对您有帮助

禁用角度路由器链接

2 个答案: