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

这看起来像是一种缓存服务的任务。权限不会经常更改，因此它们是缓存的理想选择。这样，即使多次访问同一资源也不会触发多个HTTP请求进行权限检查。

编辑：由于您每次都需要加载权限，因此您可以侦听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);
    }
});

我可以在加载页面之前保存数据

1 个答案: