0

在我的 Angular 8 应用程序中，首次加载主页时，它会将(sidebar:homesidebar)辅助路由附加到 url 并加载 homesidebar 就好了。在 homesidebar 上，有一个登录按钮，单击它会导航到登录页面。登录页面的 url 包含预期的 homesidebar 并在侧面显示 homesidebar，但是在用户登录后，侧边栏不会更改为用户的仪表板特定的侧边栏，并且 homesidebar 仍然可见，并(sidebar: homesidebar)显示 url 栏。

我遇到的第二个问题是我的代码已设置，因此如果用户尝试访问用户特定的仪表板而不首先登录，就像他们只是在 url 栏中输入用户仪表板组件的 url，那么他们将被带到登录页面，它会在侧面显示 homesidebar，但它没有显示它，甚至没有显示 homesidebar。根本没有显示侧边栏，并且 url 位置栏没有指定辅助路线（它只显示：）localhost:4200/login。

如果用户从这个格式错误的页面登录，那么他们将被重定向到各自的仪表板页面，但根本不显示各自的侧边栏。实际上，根本没有显示侧边栏，也没有在 url 栏中显示。通过调试应用程序，我确认所有变量都在代码中生成，用于使用 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]}}]);
          }
      );

  }
4

1 回答 1

1

对于登录页面没有从 Guard 中的重定向加载 homesidebar 的问题，我只是使用router.navigateByUrl路由器功能而不是加载 url router.navigate：

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

至于登录后右侧仪表板侧边栏不显示的问题，我不得不将登录组件中的导航功能更改为：

this.router.navigate(/${角色} , {outlets: {sidebar: null}}], { replaceUrl: true});

该null值删除 homesidebar，以便可以在 Routes 路径中指定的路由中加载employeessidebar 'employee'：

{ path: 'employee', component: EmployeeInterfaceComponent, canActivate: [EmployeeGuard],
  children: [
    {path: '', redirectTo: '/employee(sidebar:employeesidebar)', pathMatch: 'full'},
    {path: 'schedule', component: EmployeeScheduleComponent },
  ]
于 2019-09-18T19:37:50.643 回答