Angular 5: условно установленный маршрут по умолчанию - PullRequest
Новая
       22

Angular 5: условно установленный маршрут по умолчанию

0 голосов
/ 05 июня 2018

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

Когда главное меню нажимается, я перенаправляю в одно из подменю, но иногда это подменю недоступно- тогда я хотел бы перенаправить к следующему брату: 

{
    path: 'mymainmenue',
    children: [
        { path: 'submenu1', component: SubMenu1Component },
        { path: 'submenu2', component: SubMenu2Component },
        { path: 'submenu3', component: SubMenu3Component },
        { path: '', redirectTo: 'submenu1' },
    ]
}

Теперь «иногда» я могу вычислить.Я попытался создать три маршрута с пустым путем ('') и CanActivate -Guard.Аналогично этому: 

{
    path: 'mymainmenue',
    children: [
        { path: 'submenu1', component: SubMenu1Component },
        { path: 'submenu2', component: SubMenu2Component },
        { path: 'submenu3', component: SubMenu3Component },
        { path: '', redirectTo: 'submenu1', canActivate: [ClaimsGuard] },
        { path: '', redirectTo: 'submenu2', canActivate: [ClaimsGuard] },
        { path: '', redirectTo: 'submenu3', canActivate: [ClaimsGuard] },
    ]
}

в надежде, что смогу использовать маршрут и мои правила для возврата false в случае, например, если подменю1 невидимо и маршрутизатор выберет следующий возможный маршрут(перенаправить на подменю2 ).

Проблема с моим подходом заключается в том, что redirectTo выполняется даже до вызова моего canActivate -метода.

Что былучший способ сделать это?

1 Ответ

0 голосов
/ 06 июня 2018

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

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

Во-первых, вам нужно удалить перенаправление в объектах маршрута .

Далее, логика для вашего охранника маршрута

  1. Проверьте, могут ли пользователи получить доступ к этому маршруту
  2. Если да, разрешите пользователю перейти к маршруту
  3. Если нет перенаправления пользователя на новый маршрут и впоследствии возвращается false

Перенаправление может быть достигнуто простым введением Router в охрану маршрута и вызовом this.router.navigate(['theNextSubmenuState']);.

* 1025.* Пример такого охранника маршрута может выглядеть следующим образом: 
@Injectable()
export class ClaimsGuard implements CanActivate {
  constructor(private router: Router, private yourClaimsService: YourClaimsService) {}

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    return this.checkClaimsAccess(state);
  }

  private checkClaimsAccess(state: RouterStateSnapshot) {
    if(this.yourClaimsService.userHasAccess(state) {
      return true;
    } else {
      const nextSubmenu = this.getNextSubmenuState(state);
      this.router.navigate([nextSubmenu])
      return false;
    }
  }

  private getNextSubmenuState(state: RouterStateSnapshot): string {
    //Some logic to figure out which submenu state you would like to go to next
  }
}

Angular также предоставляет довольно хороший пример того, как перенаправления в охранниках маршрута работают с их документацией маршрутизации - взгляните на 2ndпример кода этого раздела -> https://angular.io/guide/router#teach-authguard-to-authenticate

...