Маршрутизация на вспомогательный маршрут не работает с router.navigate

В моем приложении angular 8, когда домашняя страница загружается впервые, она добавляет вспомогательный маршрут (sidebar:homesidebar) к URL-адресу и отлично загружает домашнюю панель. На домашней боковой панели есть кнопка входа в систему, и при нажатии она переходит на страницу входа. URL-адрес страницы входа включает домашнюю боковую панель, как и ожидалось, и показывает домашнюю боковую панель сбоку, но после того, как пользователь входит в систему, боковая панель не изменяется на боковую панель, специфичную для пользовательской панели управления, и домашняя панель остается видимой с (sidebar: homesidebar) отображаемой строкой URL-адреса.

Вторая проблема, с которой я столкнулся, заключается в том, что мой код настроен так, что если пользователь пытается получить доступ к пользовательской панели инструментов без предварительного входа в систему, как если бы они просто ввели URL-адрес компонента пользовательской панели инструментов в адресную строку, затем они будут перенаправлены на страницу входа в систему, и сбоку будет отображаться домашняя панель, но она не показывает ее, даже домашнюю панель. Боковая панель вообще не отображается, а на панели URL-адреса не указан вспомогательный маршрут (он просто показывает: localhost:4200/login).

Если пользователь входит в систему с этой искаженной страницы, он перенаправляется на соответствующую страницу панели инструментов, но соответствующая боковая панель вообще не отображается. На самом деле боковая панель вообще не отображается и не указывается в адресной строке. При отладке приложения я убедился, что все переменные генерируются в коде для перенаправления с помощью функции router.navigate. Как я могу исправить эти проблемы? Спасибо.

ОБНОВЛЕНИЕ:

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

Маршруты:

const routes: Routes = [

{ path: 'register', component: RegisterComponent },
{ path: 'login', component: LoginComponent },
{ path: 'manager', component: ManagerInterfaceComponent, canActivate: [ManagerGuard] },
{ path: 'employee', component: EmployeeInterfaceComponent, canActivate: [EmployeeGuard],
  children: [
    {path: '', redirectTo: '/employee(sidebar:employeesidebar)', pathMatch: 'full'},
    {path: 'schedule', component: EmployeeScheduleComponent },
  ]
},
{ path: 'vendor', component: VendorInterfaceComponent, canActivate: [VendorGuard] },
{ path: 'aboutus', component: AboutUsComponent },
{ path: 'mission', component: MissionStatementComponent },
{ path: 'contactus', component: ContactUsComponent },
{ path: '', redirectTo: '/home(sidebar:homesidebar)', pathMatch: 'full'},
{ path: 'homesidebar', component: HomeSidebarComponent, outlet: 'sidebar' },
{ path: 'employeesidebar', component: EmployeeSidebarComponent, outlet: 'sidebar' },
{ path: 'home', component: HomeComponent },
{ path: '**', component: PageNotFoundComponent}
];

Охрана сотрудников:

 canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {

    this.user = this.authService.getUser();

    let role = this.user && this.user.role[0] || null;

    if(role === "employee" && this.authService.isAuthenticated()){
      return true;
    }

    this.router.navigate(['login', { outlets: {"sidebar": ["homesidebar"]}}]);
      return false;

  }

Компонент входа:

 login() {

    if (this.loginForm.invalid) {
      return;
  }
    this.authService.login(
      {
        username: this.f.username.value,
        password: this.f.password.value
      }
    ).pipe(
      catchError(
        error => {this.badCredentials = true;
        console.log(error); 
        return error;} )
    )
    .subscribe(
        res => {
          let role = res.role[0];
          let sideBarPath = this.processRole(role);

            this.router.navigate([`${role}`, {outlets: {'sidebar': [sideBarPath]}}]);
          }
      );

  }

angular angular-router angular-auxiliary-routes
person rajndev    schedule 18.09.2019    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Из-за проблемы с тем, что страница входа не загружает домашнюю панель из перенаправления в Guard, я просто загрузил URL-адрес, используя функцию маршрутизатора router.navigateByUrl вместо router.navigate:

router.navigateByUrl('/login(sidebar:homesidebar)')

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

this.router.navigate(/${роль}, {outlets: {sidebar: null}}], { replaceUrl: true});

значение null удаляет домашнюю боковую панель, чтобы можно было загрузить боковую панель сотрудников по маршруту, указанному в пути Routes для 'employee':

{ path: 'employee', component: EmployeeInterfaceComponent, canActivate: [EmployeeGuard],
  children: [
    {path: '', redirectTo: '/employee(sidebar:employeesidebar)', pathMatch: 'full'},
    {path: 'schedule', component: EmployeeScheduleComponent },
  ]
person rajndev    schedule 18.09.2019