停用角度路由器链接 [英] Deactivation of angular router link

问题描述

我正在制作 Angular 应用程序，我在其中使用路由和身份验证保护..

stackblitz

应用组件 html

<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">用户</a></li>

<div class="row"><div class="col-xs-12 col-sm-10 col-md-8 col-sm-offset-1 col-md-offset-2"><路由器插座></路由器插座>

在上面的代码中，我做了一个 if 条件，

 
<li role="presentation" routerLinkActive="active"><a routerLink="/users">用户</a></li>

显示如果showUser为false，则他无法查看主页中的用户选项卡..

TS:

导出类 AppComponent{showUser : boolean = true;ngOnInit() {this.showUser = false;}}

这里我将 this.showUser 硬编码为 false，而在实际应用中，它将基于某些条件，例如，

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

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

但是如果我像这样更改网址

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

仔细看我最后添加了用户..以上是重定向到用户页面..

我的要求是它不应该发生.

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

除非showUser 为真，否则如何防止url 更改?

解决方案

您必须从 UserGuard 控制此执行.

首先将showUser变量设置为localStorage中的全局变量

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

其次，在guard中获取localStorage，并查看每次尝试访问路径

@Injectable()类 UserGuard 实现 CanActivate {构造函数(){}可以激活(路线:ActivatedRouteSnapshot，状态:RouterStateSnapshot): Observable|Promise|boolean|UrlTree {return localStorage.getItem('showUser');}}

希望能帮到你

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

stackblitz

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

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?

解决方案

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

这篇关于停用角度路由器链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！