Angular Маршрутизатор не отменяет навигацию по заблокированному маршруту

Question

В настоящее время у меня есть эти routes для моего Angular приложения.

const routes: Routes = [
  { path: '', component: DashboardComponent },
  { path: 'login', component: LoginComponent },
  { path: 'upload', component: UploadPictureComponent, canActivate: [AngularFireAuthGuard] },
  { path: 'view', component: ListPictureComponent, canActivate: [AngularFireAuthGuard] },
  { path: '**', component: NotFoundComponent },
];

Текущее поведение: если пользователь не вошел в систему и идет по маршруту upload или view, его маршрут заблокирован и ничего не увидит.

Желаемое поведение: если пользователь посещает заблокированные маршруты, я хочу показать ему NotFoundComponent.

Проблема, которую я не могу обойти, заключается в том, что Angular отменяет маршрутизацию событие, когда охранник отклоняет маршрут.

Answer 1

Я даю этот ответ в качестве одного из возможных решений, я бы не знал, является ли он лучшим или каков наилучший метод.

1. Я бы оставил постоянную строку, которую я будет использовать для всех моих ручной навигации пути перехода. Может быть что-то вроде: const FALLBACK_PATH = 'notfound'. Я бы оставил это в общей папке, которую я могу использовать в любом компоненте, который я хочу.

2. В AngularFireAuthGuard охране, когда условие входа в систему не удается, я бы сделал:

    this.router.navigateByUrl(FALLBACK_PATH, { skipLocationChange: true });
    return false;
   

   Примечание: я делаю skipLocationChange, потому что я не хочу, чтобы неверный путь отображался в URL, вы можете иметь его или не иметь, это зависит от ваших требований. Кроме того, приведенный выше код не проверен и просто дает вам подход.

Answer 2

Вы должны вручную перенаправить на NotFoundComponent в случае canActivate return false

  canActivate(): boolean {
    if (!this.auth.isAuthenticated()) {
      this.router.navigate(['login']);
      return false;
    }
    return true;
  }

Answer 3

canActivate в настоящее время может вернуть желаемое URLTree. Вы можете просто проверить зарегистрированного пользователя и перенаправить его в AngularFireAuthGuard:

constructor(private _authService: AuthService, private _router: Router){}
canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean | UrlTree> | boolean | UrlTree 
{
    if(this._authService.isLoggedIn) {
      // runs your current authorization logic
    } else {
      // the argument of parse is any string that doesn't represent
      // a real route
      return this._router.parse('go-to-page-not-found');
    }
  }