Angular

Question

我有以下情况：

路由器

{
        path: 'tab1',
        canActivate: [GuardService],
        loadChildren: () => import('../tab1/tab1.module').then(m => m.Tab1PageModule)
      },
      {
        path: 'tab1/:id',
        canActivate: [GuardService],
        loadChildren: () => import('../tab2/tab2.module').then(m => m.Tab2PageModule)
      },
      {
        path: 'tab1/:id/reports',
        canActivate: [GuardService],
        loadChildren: () => import('../tab3/tab3.module').then(m => m.Tab3PageModule)
      }

我想控制每个 URL / 路径中的访问。

在我的 AuthService 中，我进行了以下验证：

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {  
    if (this.auth.hasPermission(state.url) === 1) return true;
  }

它使用静态值作为“tab1”，因为我可以将“tab1”与我的数据库值“tab1”进行比较。但是如果我需要参数路径的许可，我就有麻烦了。

state.url return我，例如，“tab1/1”或“tab1/23”……；是动态的，但在我的数据库中，我需要与“tab1/:id”进行比较，因为 id 是一个动态值。

我找不到属性、方法或类似的东西，在 ActivatedRouteSnapshot 或 RouterStateSnapshot 中，比 return 我路径中的当前模式，只是 "tab1/:id"

你能帮帮我吗？

Answer 1

要检查动态值，请使用正则表达式检查您的 URL 是否有效。

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {  
    if ((tab1\/\d+).test(this.auth.hasPermission(state.url))) return true;
  }

如果 url 适合 tab1/，它将 return 为真。

谢谢

Answer 2

按照@Linker 的建议，我做了：

{
    path: 'tab3',
    data: { 
      url: '/tabs/tab3'
    },
    canActivate: [GuardService],
    loadChildren: () => import('../tab3/tab3.module').then(m => m.Tab3PageModule)
  },
  {
    path: 'tab3/:id',
    data: { 
      url: '/tabs/tab3/:id'
    },
    canActivate: [GuardService],
    loadChildren: () => import('../tab3/tab3.module').then(m => m.Tab3PageModule)
  }

我的 AuthService 被更改为：

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    if (this.auth.hasPermission(route.data.url) === 1) return true;
}

工作正常！

@Akash 方法很棒，当我只有一级路径 (tab1/:id) 时可以使用。 URL (tab1/:id/:param)... 中每增加一个深度级别，都意味着我需要在 canActivate 方法中添加一个正则表达式；但是还有其他好的解决方案。

Angular - 在 canActivate 中捕获路由器路径模式

Angular - capture router path pattern in canActivate

angular-routing