Условно загрузить модуль по пустому пути в Angular router

Question

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

const routes: Routes = [
    { path: '', loadChildren: './home/home.module#HomeModule' }
...

Прошедшие проверку пользователи должны получать свои фиды через этот модуль, также по пустому пути.

{ path: '', loadChildren: './feed/feed.module#FeedModule', canActivate: [IsAuthenticationGuard] },
{ path: '', loadChildren: './home/home.module#HomeModule', canActivate: [NoAuthenticationGuard] },

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

Вместо этого он загружает пакет модуля подачи (показанный на вкладке сети), но ничего не загружает в розетку маршрутизатора.,Очень запутанно.

Как я могу сделать условную маршрутизацию (на основе охранников или иным образом) по пустому пути?

Обновление: вот охранники по запросу

@Injectable()
export class IsAuthenticationGuard implements CanActivate {
    constructor(
        private authenticationService: AuthenticationService
    ) { }

    public canActivate(
        route: ActivatedRouteSnapshot,
        state: RouterStateSnapshot
    ): Observable<boolean> {
        return this.authenticationService.isAuthenticated.pipe(take(1), map((isAuthentication) => {
            return isAuthentication;
        }));
    }
}

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

Answer 1

Попробуйте, может быть, это:

const routes: Routes = [
  { path: '', redirectTo: condition ? 'home' : 'feed', pathMatch: 'full' },
  { path: 'home', component: HomeComponent },
  { path: 'feed', component: FeedComponent },
  { path: '*', redirectTo: 'home', pathMatch: 'full' },
];

Это не напрямую зависит от гвардейцев, но вы, вероятно, сможете получить возвращение гвардии как условие

Answer 2

Я считаю, что то, что вы намерены достичь, невозможно через охрану.Angular ищет массив маршрутов сверху вниз, и как только он получает совпадение пути, загружается соответствующий модуль / компонент.В вашем случае { path: '', loadChildren: './feed/feed.module#FeedModule', canActivate: [IsAuthenticationGuard] } - это совпадение пути URL, поэтому Angular загружает модуль подачи, однако ничего не отображает, так как защита возвращает ошибку.Он даже не проверяет соответствие URL для строки ниже.

Вместо этого вы можете

1. изменить маршруты как { path: '', loadChildren:'./home/home.module#HomeModule', canActivate: [IsAuthenticationGuard] },
2. перейдите к модулю подачи, если пользователь успешно прошел аутентификацию.Следуйте этой теме , чтобы получить больше информации о том, как это сделать.

Надеюсь, это решит вашу цель.

Answer 3

По моему мнению, есть пара вещей, которые вы делаете неправильно.

1. У вас не должно быть двух маршрутов, определенных с одним и тем же путем.
2. На вашей карте защитыбессмысленно.Пока ваш сервисный метод возвращает Observable<boolean>, вам не нужно отображать его значение.
3. Также в вашей безопасности, если вы не возвращаете true, вам нужно перейти к пути другого модуля.Для этого вам нужно будет реализовать некоторую другую логику, чтобы определить, вошел ли пользователь в систему или нет.

Ознакомьтесь с официальным руководством по угловой маршрутизации здесь .Существует много полезной информации, которая поможет вам.В особенности это:

• рекомендуемая реализация защиты
• отладка маршрутизации в вашем приложении

РЕДАКТИРОВАТЬ 2018/12/27

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

Ответ, по моему опыту, вы не можете.