我构建了一个网络应用程序,其中很大一部分是动态生成的页面。 (99%)。
每个页面只是一个带有空模板的组件,其中所有数据均通过 url 的 slug 从多个服务 API 提供。
url 可以包含三个嵌套级别,每个级别都必须对应一个逻辑嵌套(从上下文的 Angular 来看,我的意思是……友好)。
例如,一个显示有关某个国家/地区的一些信息的应用程序:
- 地区 - http://example.com/regions
- 县 - http://example.com/regions/counties
- 城市 - http://example.com/regions/counties/city
URL 使用的每个标记名都必须转换为有效的叠瓦名称:http://example.com/south-east/greater-london/london就像俄罗斯套娃一样。
<小时/>路由器似乎是这样的:
{
path: ':region-slug',
component: RegionComponent,
resolve: {
region: RegionResolver
}
},
{
path: ':region-slug/:countie-slug',
component: CountieComponent,
resolve: {
departement: CountieResolver
}
},
{
path: ':region-slug/:countie-slug/:city-slug',
component: CityComponent,
resolve: {
region: CityResolver
}
}
第一个问题,网址可以是任何内容,它总是正确的:
- http://example.com/titi => 正确
- http://example.com/qsdsqd/azeaz => 正确
- http://example.com/titi/aze/toto156 => 正确
- ...
因此,我必须控制每个参数的有效性,以便为模板提供适当的数据内容,或者在服务发现任何内容时进行重定向。
这是我的第一个问题:
- 我必须使用 Resolve或CanActivate ?
我猜这个工作最适合Resolve界面。我开始使用“解析器”在第一级(区域)实现它:
@Injectable()
export class RegionResolver implements Resolve<any>{
constructor(private regionsService: RegionService, private router: Router) { }
resolve(route: ActivatedRouteSnapshot): Observable<any> {
return this.regionsService
.getRegion(route.params['region-slug'])
.do(region => {
if(!region) this.router.navigate(['/404']);
});
}
}
我在RegionController中获取了相应的数据:
export class RegionComponent implements OnInit {
region: Array<any> = [];
constructor(private route: ActivatedRoute) { }
ngOnInit() {
this.region = this.route.snapshot.data['region'];
}
}
目前很简单,但任务开始会更加复杂,因为如果我对所有其他级别应用相同的行为,这种 url 在编程上将是正确的:
- http://example.com/south-east => 正确
- http://example.com/sdfsdfsdfsd/greater-london => 正确
- http://example.com/qsdq/toto54645/london => 正确
- ...
那么,问题:
- 我如何确保自己即使当前评估的 slug 是正确的,之前潜在的 slug 也是正确的?
最佳答案
据我所知,您已经快完成了:您的路线声明和解析看起来很好。
为什么不直接从解析中验证 slugs 并重定向到 /404
如果 slugs 无效?
您可以创建这样的函数:
// validate-slugs.ts
/**
* Return true if all given slugs are valid.
*/
export function are_slugs_valid(slugs: any): boolean {
const validRegions = ['ile-de-france', 'nord-pas-de-calais'];
const validCounties = ['val-de-marne', 'nord', 'pas-de-calais'];
// Validate region slug
if (slugs && slugs['region-slug'] && validRegions.indexOf(slugs['region-slug']) === -1) {
return false;
}
// Validate county slug
if (slugs && slugs['county-slug'] && validCounties.indexOf(slugs['county-slug']) === -1) {
return false;
}
// @TODO: Validate city slug...
return true;
}
然后在你的解析中使用它,如下所示:
@Injectable()
export class RegionResolver implements Resolve<any>{
constructor(private router: Router) { }
resolve(route: ActivatedRouteSnapshot): Observable<any> {
// NB. route.params contains ALL the slugs in the current route.
if (!are_slugs_valid(route.params)) {
this.router.navigate(['/404']);
}
// Proceed with fetching additional data...
}
}
如果验证 slugs 的代码需要更复杂(例如发出 HTTP 请求),请转换 are_slugs_valid()
将函数添加到服务中并使用 DI 将其注入(inject)解析中。
我尝试了我建议的代码,并获得了以下行为:
- http://localhost/ile-de-france - 好的(显示
RegionComponent
) - http://localhost/ile-de-france/val-de-marne - 好的(显示
CountyComponent
) - http://localhost/foo - 404
- http://localhost/foo/val-de-marne - 404
- http://localhost/ile-de-france/foo - 404
如果您想查看代码,请告诉我。
[编辑]一些额外的注意事项:
1) 由于您可能会访问数据库来验证段,因此您需要对其进行优化。为什么不在数据库中存储所有可能的路径?
ile-de-france
ile-de-france/val-de-marne
ile-de-france/val-de-marne/creteil
...
这样,对于最深的路径,例如 ile-de-france/val-de-marne/creteil
,您只需要一个查询即可验证路径中包含的三个 slugs( :region-slug
、 :county-slug
和 :city-slug
)。
2) 如果添加 path
列到存储实体(即地区、县、城市...)的同一个表中,您只需要一个查询来加载实体并验证路径(路径充当实体的键)。
旁注:如果您遵循我上面的建议,那么将代码保留在解析中是有意义的,因为它会预加载一些数据并进行一些验证,这就是解析的用途。如果您只是想验证路径而不预加载数据,我可能会将代码放在 CanActivate
中。服务。
关于javascript - CanActivate,动态 url 解析器(多个嵌套动态段),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41706205/