我可以在加载页面前将数据保存在防护中吗

Question

当前路由配置：

  //...
  {
    path: 'foo/:id',
    component: SomeComponent,
    canActivate: [SomeGuard]
  },
  //...

然后，我调用权限服务来获取组件的访问权限：

@Injectable()
export class SomeGuard implements CanActivate {

  constructor(private service: Service) {
  }

  canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
    const id = parseInt(next.params['id']);

    return this.service.getPermissions(id).then(permissions => {
      if (permissions.canView) {
        return true;
      }
      return false;
    });
  }
}

但在组件中，我使用了相同的权限端点，这意味着我连续调用它两次才能转到一个页面：

 //...
  constructor(private route: ActivatedRoute,
              private service: Service) {
  }


  ngOnInit() {
    this.id = parseInt(this.route.snapshot.params['id']);

    this.service.getPermissions(this.id).then(permissions => {
        // ...
    });
  }
  //...

因此，最好只将权限数据保存在路由中，并由guard和组件使用它。我试过使用resolve，但发现resolve只有在守卫之后才会激活，这并不好。那么如何保存权限数据呢？

Answer 1

编辑：因为您每次都需要加载权限，所以您可以侦听RouteNavigationStart并清除缓存。如果这变得太麻烦，无法在PermissionsService中维护，您可以将逻辑提取到单独的服务中。

您可以在用于获取权限的服务中执行以下操作：

// Permissions service
private permissionCache;

constructor(
    router: Router,
) {
    // clear cache when a route navigation starts
    router.events
        .filter(event => event instanceof NavigationStart)
        .subscribe(event => this.permissionCache = {})
}

getPermissions(id) {
    if (permissionCache[id]) {
        return Observable.of(permissionCache[id]);
    } else {
        // get the permissions
        permissionCache[id] = response;
        return Observable.of(response);
    }
});