Question

我的子路由组件正在查询API中的一些数据。目前我正在检查组件，如果通过检查API返回的数据，作为路由参数提供的id是有效的。

我认为这是一种糟糕的风格，并希望将检查放入一个警卫，检查提供的参数是否在组件被激活之前有效。

但是，我也希望节省时间和资源。这将需要两个API请求。因此，我想知道是否有可能将数据从防护装置传递给组件。我考虑过传递路线参数但是canActivate只提供了一个只读的ActivatedRouteSnapshot。

因此我的问题是：是否可以将数据从防护组件传递到组件？或者是否有另一种（甚至更好的）方法来节省资源并在这种情况下阻止多个API请求？

Answer 1

我认为您正在寻找Resolver。使用解析程序，您可以在组件加载之前加载路径转换上的数据。设置与防护装置大致相同。

@Injectable()
export class YourResolver implements Resolve<YourObject> {

    constructor(private dataService: DataService) {
    }

    resolve(route: ActivatedRouteSnapshot): Observable<YourObject> {
        return this.dataService.getData().do(data=>{
           // you could potentially handle a redirect here if need be/
         });
    }
}

然后在您的路线设置中

       {
            path: 'yourComponent', component: YourComponent,
            resolve: {
                data: YourResolver
            }, outlet: 'content'
        },

Answer 2

Angulars canActivate在您的组件之前触发。在canActivate中，您可以访问激活的路由器，并使用您的api检查您想要的“id”或巫婆参数，并且在从api收到结果后，您可以返回true或false。如果返回false，则根本不会触发控制器。因此，检查用户权限的正确过程是在canActivate类中检查它们。不要忘记，您可以链接canActivate过滤器，并按给定顺序检查它们。

path:"doSomethingById/:id", controller: ExampleController,  canActivate: [AuthGuard, IdChek]

在上面的示例中，IdCheck仅在AuthGuard返回true时运行。并且只有当它们都返回true时才会触发控制器。

将数据从Guard传递给组件

2 个答案: