代码之家 › 专栏 › 技术社区 › Maniraj Murugan

角度路由器链路停用

auth-guard angular-routing angular6 typescript angular

Maniraj Murugan · 技术社区 · 7 年前

我正在制作角度应用程序,在这里我使用路由和身份验证保护。。

<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 如果为false,则他无法查看主页中的用户选项卡。。

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

因此,条件为假,因此用户菜单不显示在视图中。。

但是如果我改变网址

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

仔细看,我补充道用户最后。。以上内容将重定向到用户页面。。

我的要求是这不应该发生。

因为除非条件为真,否则它不应该被重定向到用户页面。

如何防止url更改,除非 showUser 这是真的吗?

2 回复 | 直到 7 年前

Antonio de la mata 7 年前

您必须从UserGuard控制此执行。

首先,将showUser变量设置为全局变量troughtlocalstorage

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

我希望有帮助

DD Developer 7 年前

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