1

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

堆栈闪电战

应用组件 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为假，则他无法查看主页中的用户选项卡..

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

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

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

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

showUser除非是真的，否则如何防止网址更改？

4

2 回答 2

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

我希望它有帮助

于 2018-12-10T12:37:19.843 回答
0

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] }
于 2018-12-10T12:31:53.840 回答