如何在Angular10中统一canActivate逻辑和传递选择器功能作为路由参数？

问题描述

阅读本文的每个人:)。玩的很开心！我正在解决我们项目中的一个问题，但找不到编写 DRY 代码的方法我们在应用中有 /article/:id 网址，有些文章可以通过 id 获取 - [1,2,3]，其他人不是 [11,22,33]（例如），我需要阻止用户打开此类 ID。

我开始思考如何正确地实现该逻辑 - resolver( resolve() ) 首先出现在我的脑海中，但过了一段时间我更喜欢 canActivate . 解决更多是关于页面的数据预加载，而不是关于让/不让用户激活路由。 CanActivate 实际上就是关于这个的。我不想在 resolve() 和组件本身中重复加载两次数据，所以我最后的选择是 canActivate，我认为这里很完美。

所以，我写了这段代码：

//#Todo: unify with vacancy available guard
@Injectable()
export class ArticleAvailableGuard implements CanActivate {

  constructor(
    private _store: Store<fromArticles.State>,private _router: Router
  ) {
  }

  canActivate(route: ActivatedRouteSnapshot,state: RouterStateSnapshot):
    Observable<boolean | UrlTree> |
    Promise<boolean | UrlTree> | boolean |
    UrlTree {

    let articleID = parseInt(route.params.id)

    return this._store.pipe(
      select(selectArticleById(articleID)),map(article => !!article),tap((dataAvailable) => {
        if (!dataAvailable)
          this._router.navigate(['/']).then()
      })
    )
  }
}

它按我的需要工作。但是对于具有与文章类似实体的页面使用完全相同的逻辑。唯一的区别是数据选择器，而不是 selectArticleById，我使用的是 selectimagesById 我尝试在

中传递选择器功能

{
    path: 'article/:id',component: ArticleSinglePageComponent,canActivate: [ArticleAvailableGuard],data: { selector: selectArticleById }
}

,但收到检测到的未序列化数据错误与路由器。我如何将这个 Guard 逻辑统一为一个 Guard，而不是分成相同的多个 Guar，而只有选择器不同？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

angular canactivate router router