0

我有一个这样的解析器：

export class TaskResolver implements Resolve<Documents> {

  constructor(private taskService: TaskService) { }

  resolve(route: ActivatedRouteSnapshot): Observable<Documents> {
    const taskId = route.params.taskId;
    return this.taskService.DocumentsTask(taskId);
  }
}

在我的组件内部，我有：

this.route.data.subscribe((data: { documents: Documents }) => {
     if (data.documents) {
    this.documents = data.documents;
  } else {
    this.router.navigate([`/error/404`]);
  }
});

我需要移动this.router.navigate([ /error/404]); 在解析器内部，这样解析器将检查数据是否为空并重定向到错误，而不是组件。或者也许移动到看起来像这样的身份验证守卫

canActivate(route: ActivatedRouteSnapshot): boolean {
    const taskId = route.params.taskId;
    if (taskId) {
      return true;
    }
  }

DocumentsTask(taskId) 返回 Observable

4

2 回答 2

0

CanActivate Guard 可以从Observable<boolean | UrlTree>Angular 7.1.0 版本开始返回。这允许守卫评估 aboolean并在评估为 false 时返回路由重定向。

几天前我写了一个答案，其中介绍了实现细节，但在你的情况下，我将如何处理它：

首先，创建守卫：

import { Injectable } from '@angular/core';
import { CanActivate, Router, UrlTree, ActivatedRouteSnapshot } from '@angular/router';
import { Observable, of } from 'rxjs';
import { map, catchError } from 'rxjs/operators';
// import your TaskService here

@Injectable()
export class RequireDocumentsGuard implements CanActivate {
  constructor(private router: Router, private taskService: TaskService) {
  }

  canActivate(route: ActivatedRouteSnapshot): Observable<boolean | UrlTree> {
    return this.taskService.DocumentsTask(route.params.taskId).pipe(
      catchError(() => of(false)),
      map(documents => !!documents || this.router.parseUrl('error/404'))
    );
  }
}

然后只需将警卫添加到您的路线中RoutingModule：

{ 
  path: 'your/desired/route/:taskId', 
  component: YourComponentHere,
  canActivate: [RequireDocumentsGuard ]
}

注意：您尚未发布您的路线结构，因此我还将指出您需要确保您的“错误/404”路线实际存在，例如：

{ 
  path: 'error/404', 
  component: Your404ErrorComponent
}

希望有帮助！

于 2019-06-28T16:53:50.467 回答
-1

像这样使用 Auth Guard：

ng generate guard auth  

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from 
'@angular/router';
import { Observable } from 'rxjs/Observable';
import { AuthService } from './auth.service';
import {Router} from '@angular/router';
@Injectable()
export class AuthGuard implements CanActivate {
  constructor(private auth: AuthService,
    private myRoute: Router){
  }
  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {

    const taskId = next.params.taskId;
    if (taskId) {
      return true;
    }else{
      this.myRoute.navigate(["/error/404"]);
      return false;
    }
  }
}
于 2019-06-28T16:53:39.420 回答