change permission subject

frontend/src/app/api/permission.service.ts

@@ -6,7 +6,7 @@ import {
   PermissionsList
 } from 'picsur-shared/dist/dto/permissions';
 import { AsyncFailable, HasFailed } from 'picsur-shared/dist/types';
-import { BehaviorSubject } from 'rxjs';
+import { BehaviorSubject, filter, Observable, take } from 'rxjs';
 import { ApiService } from './api.service';
 import { UserService } from './user.service';
 
@@ -18,18 +18,24 @@ export class PermissionService {
     this.onUser();
   }
 
-  public get live() {
-    return this.permissionsSubject;
+  public get live(): Observable<Permissions> {
+    return this.permissionsSubject.pipe(
+      filter((v) => v !== null)
+    ) as Observable<Permissions>;
   }
 
-  public get snapshot() {
-    return this.permissionsSubject.getValue();
+  public get snapshot(): Permissions {
+    return (
+      this.permissionsSubject.getValue() ?? (PermissionsList as Permissions)
+    );
+  }
+
+  public loadedSnapshot(): Promise<Permissions> {
+    return new Promise((resolve) => this.live.pipe(take(1)).subscribe(resolve));
   }
 
   // Lets be optimistic for better ux
-  private permissionsSubject = new BehaviorSubject<Permissions>(
-    PermissionsList as Permissions
-  );
+  private permissionsSubject = new BehaviorSubject<Permissions | null>(null);
 
   @AutoUnsubscribe()
   private onUser() {

frontend/src/app/guards/permission.guard.ts

@@ -14,7 +14,7 @@ import { PermissionService } from '../api/permission.service';
 export class PermissionGuard implements CanActivate {
   constructor(private permissionService: PermissionService) {}
 
-  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
+  async canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
     const requiredPermissions: Permissions = route.data['permissions'];
     if (!isPermissionsArray(requiredPermissions)) {
       throw new Error(
@@ -22,16 +22,12 @@ export class PermissionGuard implements CanActivate {
       );
     }
 
-    const ourPermissions = this.permissionService.snapshot;
+    const ourPermissions = await this.permissionService.loadedSnapshot();
 
     const isOk = requiredPermissions.every((permission) =>
       ourPermissions.includes(permission)
     );
 
-    console.log(
-      `PermissionGuard: requiredPermissions=${requiredPermissions} ourPermissions=${ourPermissions} isOk=${isOk}`
-    );
-
     return isOk;
   }
 }