如何检查具有参数的匹配路线？ （在路线警卫中）

Question

我定义了一条路由，其中​​包含一个名为uuid的查询参数

{path: 'is-protected/:uuid', component: protectedComponent, canActivate: [RouteGuardService]}

在路由防护中，我需要检查url是否匹配并且路由参数（：uuid）是否为空。如果路线没有参数，我需要将其重定向到本地路线。 我正在尝试使用

if (state.url == 'is-protected'){
  if( query param exists){
    return true;
  }
  else {
      this.route.navigate(['/']);
  }
}

这将不起作用，因为state.url不包含查询参数，因此它将永远不会到达此代码块。

是否可以检查包含参数的路线是否存在并进行相应导航？

Answer 1

获取参数

您可以检查组件或防护中从'@ angular / router'导入ActivatedRouter的路由参数。

import { ActivatedRoute } from '@angular/router';

然后将其注入构造器并订阅参数。

constructor( private router: ActivatedRoute ) {
    this.router.params.subscribe( (params: any) => {
      console.log('params.yourParam');
    });
   }

然后，您可以访问并使用参数检查所需内容。

编辑：

在canActivate中使用非常相似，您可以这样做：

（如果不需要可观察的内容，也可以使用ActivatedRouteSnapshot）

import { ActivatedRouteSnapshot, CanActivate } from '@angular/router';

在您的守卫班级中，获得如下所示的参数：

 canActivate( router: ActivatedRouteSnapshot ): boolean{

if ( Object.keys(router.params).length > 0 ){ 
    //then you have params

   if ( condition you need to check){
     return true
   } else { 
     return false;
   }

} else { 
     this.route.navigate(['/home']);
}

希望它对您有帮助。

Answer 2

我实现的一种可能的解决方案是在没有参数的路由器本身中创建重定向，并将其重定向到本地。

{ path: 'is-protected', redirectTo: 'home', pathMatch: 'full' }

如果查询参数不存在，这将处理。这种方法对我有用，因为我没有任何类似的路线或没有参数的路线。

现在是路线守卫

if (state.url.indexOf('is-protected') > -1) {
    //this route will have the query param. If it didnt, it would be redirected automatically because of redirection added in list of routes
  if (condition I need to test) {
    return true
  } else {
    this.route.navigate(['/home']);
  }
}

如果有更好的方法或解决方案，请发表评论。谢谢！

Answer 3

您应该注入构造函数路由：ActivatedRouteSnapshot

您可以访问像这样的路由参数，并将其与您的期望进行比较

let id;

if(route.paramMap.has('id')){
    assessmentId = route.paramMap.get("id");
}

Answer 4

我的路由中只有id参数，对于我来说，我使用了网址的替换功能

import { ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';

   canActivateChild(route: ActivatedRouteSnapshot,
                    state: RouterStateSnapshot): Observable<boolean>|Promise<boolean>|boolean {
        const url: string = state.url.replace(/[0-9]/g, ':id');
        // if you have route like '/posts/post/5' this will return '/posts/post/:id'
        // your checking logic
   }