I am working on an angular application for work that needs to implement permissions. The permissions are currently stored in the backend as a 1 or a 0, and the front end calls a service to return the user's permission and if the user does not have permission for a certain action, the button to perform that action is disabled. We thought about it for a while and decided that the best option would be to save the permission to session storage on start up and get it from there whenever it needs to be checked.

This works very well after the application starts, every page successfully reads the permission and disabled the appropriate buttons, however I am having an issue with the initial start up of the application. The permission must be received through an asynchronous method, so the application continues startup while the permission is being received. Since the default is no permission, the first page has a button disabled even after the permission is received because it was created before the asynchronous method was called. After a refresh it works as intended.

I have been trying to find a way to either detect when the change is made to session storage and update the initial component accordingly or have the application wait for the method to get permissions to finish before continuing startup. Any help would be appreciated.

-Thanks

CodePudding user response：

Hi I prepared a dummy process-diagram:

You have some options to implement something like that.

1. HttpInterceptors UI-Spinner during all backend requests. Tutorials: Angular show spinner for every HTTP request with very less code changes https://indepth.dev/tutorials/angular/how-to-implement-global-loaders-using-http-interceptors
2. Custom solution, which covers only this case ( without HttpInterceptor )
3. Using resolvers

CodePudding user response：

Try this, it works for me

Create a service called BroadCasterService -

import { Injectable } from '@angular/core';
import { Subject, Observable, BehaviorSubject } from 'rxjs';
import { filter, map } from 'rxjs/operators';
@Injectable({
providedIn: 'root'
})
export class BroadCasterService {
public title = new BehaviorSubject('');
private subject = new Subject<BroadcasterModel>();
public sideNavToggleSubject: BehaviorSubject<any> = new BehaviorSubject(null);
broadcast(key:string, data:any) {
    this.subject.next({ key: key, data: data });
}
on(key:string): Observable<any> {
    return this.subject.pipe(filter(m => m.key == key), map(m => m.data));
}
setTitle(title: string) {
    this.title.next(title);
}
public toggle(data:any) {
    return this.sideNavToggleSubject.next(data);
  } 
}

Then import this service in your component where you set your session data -

import { BroadCasterService } from '../services/broad-caster.service';

Add services in constructor -

 constructor(private broadcastService: BroadCasterService)

Then along with the session data, set the permission data in broadcast as well -

this.sharedService.getPermission('').subscribe((res: any) => {
  this.storage.setLocalStorageData('permissionData', res?.data, true);
  this.broadcastService.broadcast("permissionData", res?.data);
});

Call broadcast service where you set permissions -

let modules :any;
 modules = localStorage.getItem("permissionData");
 this.broadcastService.on('permissionData').subscribe(cic => {
        modules = cic; //this keeps the data until the page is refresh
 });

After refresh the page you get the permission data from session storage.

I hope it will be helpful for you.