javascript - CanActivate，动态 url 解析器(多个嵌套动态段)

Question

我构建了一个网络应用程序，其中很大一部分是动态生成的页面。 (99%)。

每个页面只是一个带有空模板的组件，其中所有数据均通过 url 的 slug 从多个服务 API 提供。

url 可以包含三个嵌套级别，每个级别都必须对应一个逻辑嵌套(从上下文的 Angular 来看，我的意思是……友好)。

例如，一个显示有关某个国家/地区的一些信息的应用程序:

1. 地区 - http://example.com/regions
2. 县 - http://example.com/regions/counties
3. 城市 - 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
    }
}

第一个问题，网址可以是任何内容，它总是正确的:

1. http://example.com/titi => 正确
2. http://example.com/qsdsqd/azeaz => 正确
3. http://example.com/titi/aze/toto156 => 正确
4. ...

因此，我必须控制每个参数的有效性，以便为模板提供适当的数据内容，或者在服务发现任何内容时进行重定向。

这是我的第一个问题:

1. 我必须使用 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 在编程上将是正确的:

1. http://example.com/south-east => 正确
2. http://example.com/sdfsdfsdfsd/greater-london => 正确
3. http://example.com/qsdq/toto54645/london => 正确
4. ...

那么，问题:

1. 我如何确保自己即使当前评估的 slug 是正确的，之前潜在的 slug 也是正确的？

Answer 1

据我所知，您已经快完成了:您的路线声明和解析看起来很好。

为什么不直接从解析中验证 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 中。服务。