停用角度路由器链路

loading...


0

我正在进行角度应用,我正在使用路由和auth后卫..

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>

在上面的代码中,我已经做了 if 条件,

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

显示 showUser 是否为false,然后他无法在主页中查看用户选项卡 .

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

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

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

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

除非 showUser 为真,否则如何防止网址更改?

loading...

2回答

  • 0

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

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

  • 0

    您必须从UserGuard控制此执行 .

    首先,将showUser变量设置为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');
      }
    }
    

    我希望它有所帮助

评论

暂时没有评论!