0

再会！

我有一个用于处理时间卡的 Angular 7 应用程序。我正在使用 CanActivate Guard 来输入组件。CanActivate 代码使用 Observable 来确定是否应该让它们通过或重定向。

  timecardID: number;
  constructor(private globals: Globals, private router: Router, private securityService: SecurityService) { }
  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean | UrlTree> | boolean {

    if (next.params.timecardId) {
      this.timecardID = +next.params.timecardId;
      return this.hasAccessToTimecard();
    }

    return this.empNumber === this.globals.empNumber;
  }


  //Does current user have access to this specific timecard
  hasAccessToTimecard(): Observable<boolean | UrlTree> {
    return this.securityService.hasRightsToTimecard(this.timecardID);
  }

它调用的服务如下所示：

  private readonly HasRightsToTimecardURI = 'api/Security/HasRightsToTimecard';
  private readonly HasRightsToEmployeeURI = 'api/Security/HasRightsToEmployee';

  constructor(private http: HttpClient, @Inject('BASE_URL') private baseUrl: string, private router: Router) { }

  //I don't like the use of router to navigate here.  But without it, on false return the UrlTree isn't used for redirections.
  public hasRightsToTimecard(timecardID: number): Observable<boolean | UrlTree> {
    let parameters = new HttpParams();
    parameters = parameters.set('timecardID', String(timecardID));

    return this.http.get<boolean | UrlTree>(this.baseUrl + this.HasRightsToTimecardURI, { params: parameters }).pipe(
      tap((result) => {
        this.router.navigate(['/home']);
        return  result ? result : this.router.createUrlTree(['/home']);
      })
    );
  }

我已经验证了当 API 返回 false 时，会创建并返回 UrlTree 以及返回 true 的 API 结果也正常的逻辑。

但是，我的实际结果是，如果我尝试使用控件访问路由：

  1. 使用应用程序组件中的控件，我有正确的访问权限，守卫让我通过
  2. 使用应用程序组件中的控件，我没有正确的访问权限，守卫将我留在我所在的位置（拒绝我走那条路线）。什么时候应该重新路由我。
  3. 如果我试图通过在浏览器中键入它而直接在该路线上“着陆”，我只会得到一个空白的路由器插座。

谁能帮我？

另外：可能的相关路线（删除了其他项目）：

const routes: Routes = [
  {
    path: 'timecards', canActivateChild: [RightsGuard], children: [
      { path: 'edit/:timecardId', canActivate: [TimecardGuard], component: TimecardNewComponent }
    ]
  }
];
4

1 回答 1

0

插上一段时间后，我解决了自己的问题。tap() 的使用不正确。根据文档（http://rxjs-dev.firebaseapp.com/api/operators/tap），tap 不会修改结果值，它将始终返回原始值。使用 map() 是正确的函数。

于 2020-05-07T16:09:35.480 回答