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

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"因为我可以比较"表格"与我的DB值"tab1"但是如果我需要对参数路径的许可，我就有麻烦了。

state.url返回给我，例如，"tab1/1"或"tab1/23"…是动态的，但在我的数据库中，我需要比较"tab1/:id"因为id是一个动态值。

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

你能帮我吗?

Answer 1

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

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

如果url符合tab1/，则返回true。

感谢

Answer 2

按照@ link的建议，我这样做了:

{
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)
}

My AuthService被修改为:

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

它工作得很好!

@Akash方法是伟大的，当我只有一个层次的路径(tab1/:id)工作。URL (tab1/:id/:param)中每增加一层深度…，意味着我需要一个额外的正则表达式在canActivate方法;然而，还有其他好的解决方案吗?