Угловая проверка резольвера маршрута, если данные пусты

Question

У меня есть такой резольвер:

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]); внутри распознавателя, чтобы распознаватель проверил, пустые ли данные, и перенаправил их на ошибку, а не на компонент. , Или, может быть, перейти к auth guard, который выглядит так

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

DocumentsTask (taskId) возвращает наблюдаемый

Answer 1

Защитник CanActivate может вернуть Observable<boolean | UrlTree> начиная с версии 7.1.0 Angular. Это позволяет охраннику оценить boolean и вернуть перенаправление маршрута, если оно оценивается как ложное.

Я написал ответ несколько дней назад, в котором рассматриваются детали реализации, но вот как я бы подошел к нему в вашем случае:

Сначала создайте стражу:

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

Примечание: Вы не опубликовали свою структуру маршрута, поэтому я также отмечу, что вам необходимо убедиться, что ваш маршрут «error / 404» на самом деле существует как:

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

Надеюсь, это поможет!

Answer 2

используйте 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;
    }
  }
}