Получить домашнюю страницу с двумя различными маршрутами - PullRequest
Новая
       3

Получить домашнюю страницу с двумя различными маршрутами

2 голосов
/ 01 мая 2019

google.com это домашняя страница.Мне нужны два разных маршрута для домашней страницы.Первый маршрут работает, когда пользователь не вошел в систему (Auth) , а второй маршрут работает, когда пользователь вошел в систему (панель инструментов) .

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

Примечание: Оба модуля состоят из нескольких компонентов.В Auth (логин - регистрация - сброс) компонентов, а в Dashboard (индекс - пользователи - сообщения) компонентов. 

const routes: Routes = [
  {
    path: 'index',
    loadChildren: './modules/index/index.module#IndexModule'
  },
  {
    path: 'error',
    loadChildren: './modules/error/error.module#ErrorModule'
  },

  // Fallback when no prior routes is matched
  { path: '**', redirectTo: 'not-found', pathMatch: 'full' }
];

@NgModule({
  imports: [RouterModule.forRoot(routes, { useHash: false })],
  exports: [RouterModule],
  providers: []
})
export class AppRoutingModule { }

const routes: Routes = [
  {
    path: '',
    children: [
      {
        path: '',
        loadChildren: './modules/home/home.module#HomeModule',
        canLoad: [AuthGuard],
      },
      {
        path: 'auth',
        loadChildren: './modules/auth/auth.module#AuthModule',
        canLoad: [NoAuthGuard]
      },
    ]
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class IndexRoutingModule { }

const routes: Routes = [
    {
        path: '',
        component: HomeLayoutComponent,
        pathMatch: 'full',
        children: [
            {
                path: '',
                redirectTo: 'dashboard',
                pathMatch: 'full'
            },
            {
                path: 'dashboard',
                component: DashboardComponent,
                data: { title: 'Dashboard' }
            },
        ]
    },
];

@NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule]
})
export class HomeRoutingModule { }

const routes: Routes = [
    {
        path: '',
        component: AuthLayoutComponent,
        pathMatch: 'full',
        children: [
            {
                path: '',
                redirectTo: 'login',
                pathMatch: 'full'
            },
            {
                path: 'login',
                component: LoginComponent,
                data: { title: 'Sign In To Admin' }
            },
        ]
    }
];

@NgModule({
    imports: [
        RouterModule.forChild(routes)
    ],
    exports: [
        RouterModule
    ]
})
export class AuthRoutingModule { }

Проблема только в маршрутизации, а не в охране и не в чем-либо.

1 Ответ

1 голос
/ 01 мая 2019

Первый маршрут работает, когда пользователь не вошел в систему (Auth), а второй маршрут работает, когда пользователь вошел в систему (панель инструментов).

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

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

https://angular.io/api/router/UrlMatcher

Сложная часть доступа к текущему пользователю, вошедшему в систему, и я предполагаю, что это состояние известно только службе. Нечто подобное UsersService.isLogged(), которое возвращает наблюдаемое значение true / false , потому что, возможно, ему нужно связаться с сервером для восстановления предыдущего сеанса.

Итак, я бы использовал активатор, чтобы прочитать это состояние в глобальную переменную, а затем использовать эту переменную из UrlMatcher. Активатор не осуществляет никакого логического контроля над маршрутом, потому что он всегда выдаст true для активации маршрута. Мы просто хотим получить доступ к сервису и выполнить асинхронную операцию.

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

let globalUserState = false;

class UserActivator implements CanActivate {
    public constructor(private users: UserService) {
    }

    public canActivate(): Observable<boolean> {
        return this.users.isLoggedIn().pipe(
            tap(value => globalUserState = value),
            mapTo(true)
        );
    }
}

const routes: Routes = [
    {
        path: '',
        canActivate: [UserActivator],
        children: [
            {
                // you can define more than one child using different matching rules
                matcher: (url: UrlSegment[]) => {
                    return url.length === 1 && url[0].path === '/' && globalUserState ? ({consumed: url}) : null;
                },
                children: [
                    {
                        // lazy modules must be loaded as children
                        path: '',
                        loadChildren: '../lazy/home/home.module#HomeModule'
                    }
                ]
            },
        ]
    }
];
...