angular - 角度路由相同路径不同的防护

Question

我想使用相同的路径ticket，因为我想在保存某些东西时重定向（使用相同的组件来更新票证）。但是有一个问题canActivate。修复它的最佳方法是什么？

const router: Routes = [
  {
    path: '',
    component: HomeLayoutComponent,
    canActivate: [AuthGuard],
    children: [
      {
        path: '',
        component: HomeComponent
      },
      {
        path: 'ticket',
        canActivate: [SupportGuard],
        component: TicketComponent
      },
      {
        path: 'ticket',
        canActivate: [CustomerGuard],
        component: SiteTicketComponent
      },
      ....
    ]
  },
  {
    path: '',
    component: LoginLayoutComponent,
    children: [
      {
        path: 'login',
        component: LoginComponent
      },
      {
        path: 'signup',
        component: SignupComponent
      },
    ]
  },
  {
    path: '**',
    component: Error404Component
  }
]

提前致谢。

Answer 1

我有一个类似的问题。

BaseComponent解决方案是为两条路由引入一个父组件，并在该组件内部执行一个router.navigate含义：

const router: Routes = [
   {
    path: '',
    component: BaseComponent,
    children: [
      {
       path: '',
       component: HomeLayoutComponent,
       canActivate: [AuthGuard],
       children: [
      ...
       ]
     },
     {
       path: '',
       component: LoginLayoutComponent,
       children: [
      ...
       ]
     },
    ...
   ]}

在 BaseComponent 内部：

ngOnInit(): void {
    if (theCondition) {
      this.router.navigate(['./one-path'], { relativeTo: this.route });
    } else {
      this.router.navigate(['./other-path'], { relativeTo: this.route });
    }
}