Как использовать Observable в Angular Route Guard? - PullRequest
Новая
       24

Как использовать Observable в Angular Route Guard?

0 голосов
/ 27 апреля 2019

В моем модуле угловой маршрутизации я использую базовую навигацию, когда она является домашней страницей по умолчанию, теперь при некоторых условиях я хочу решить, по какому маршруту идти.Так выглядит маршрутизация моего приложения. 

 { path: '', redirectTo: 'home1', canActivate: [homepageGuard], pathMatch: 'full' },
  { path: 'home1', loadChildren: './lazyloadedmodule1' },
  { path: 'home2', loadChildren: './lazyloadedmodule2' },
  { path: 'home3', loadChildren: './lazyloadedmodule3' },
  { path: 'basehome', loadChildren: './lazyloadedmodule4' }

Теперь в моем охраннике маршрута я вызываю подписку следующим образом. 

canActivate(): Observable<any> | boolean {
    return this._myService.getCurrentApp().subscribe(
      (r) => {
        if(r === 'app1'){
          //navigate to app1homepage
        } else if (r === 'app2') {
          //navigate to app2homepage
        } else {
          // navigate to base homepage
        }
      },
      (e) => {
        console.log(e);
        return false;
      }
    );
  }

Так выглядит мой сервис там, где я вызываю API. 

public getCurrentApp(): Observable<any> {
    return this.http.get(this.apiBaseUrl + 'getApp').pipe(
      catchError((err: HttpErrorResponse) => {
        return throwError(err.error.errorMessage);
      }));
  }

Во-первых, охранник маршрута не принимает значение в качестве подписки, потому что я верю, что он ожидает только логическое значение, но я получу ответ в виде строки обратно.Как мне убедиться, что при первой загрузке страницы она вызывает API и перенаправляет ее соответственно?

Ответы [ 2 ]

1 голос
/ 27 апреля 2019

Я предлагаю что-то вроде этого.Воспользуйтесь сервисом и верните истину / ложь и навигацию. 

canActivate(): Observable<any> | boolean {
return this._myService.getCurrentApp()
    pipe(
        tap((response) => {
            if(r === 'app1'){
                this.router.navigate([...]);
            } else if (r === 'app2') {
                this.router.navigate([...]);
            } else {
                this.router.navigate([...]);
            }
        }),
        map(() => false),
        catchError((e)=> of(false))
    )
    }
  }

Честно говоря, это не лучшее решение для такой проблемы.Я полагаю, что лучшим подходом было бы создание разных AuthGuards для другого пути, который будет выполнять запрос API и проверять, разрешено ли идти по определенному маршруту.Тогда только верните false или true.

0 голосов
/ 27 апреля 2019

Ваш охранник не должен подписываться на наблюдаемое, это делает роутер ....

Таким образом, вам необходимо вернуть наблюдаемую информацию, которая возвращает значение true или false.

Если вы собираетесь перенаправить маршрут, то вы, очевидно, никогда не вернете true ... попробуйте это ... 

canActivate(): Observable<boolean> {
    return this._myService.getCurrentApp().pipe(
        tap(r => {
            if(r === 'app1'){
                //navigate to app1homepage
            } else if (r === 'app2') {
               //navigate to app2homepage
            } else {
               // navigate to base homepage
            }
        }),
        catchError(r => of(false))
    );
}
...