CODEWITHSUNDEEP
angularangular-services
Shafayat Alam
Shafayat Alam

Reputation: 730

Angular : Destroy a service variable on logout

I am working on an angular project in which I have a service(reports.service.ts) which is added as a provider in app.module.ts.

Later this service was used in many components and these components modifies variables in that service when a user performs operations.

Later I wanted to reset these service variables to null when the user logs out (and want to reflect this across the entire application/other components).

This is what I did:

logout() {
    delete localStorage[AppConfig.USER_INFO_KEY];
    delete localStorage['CURRENT_BOT'];
    delete localStorage['DATE_OBJ'];
    this.Service.savedData = {};
    this.Service.dateObj = {};
    this.Service.token = '';
    this.Service.deleteMsg = '';
    this.router.navigate(['/login']);
}

The problem is when I reset these variables like the way I did, this only resets variable inside the module in which this logout() function resides.

P.S. I didn't provide the reports.service.ts in other components individually, just added it in app.module.ts.

Upvotes: 2

Views: 9394

Answers (2)

Damien
Damien

Reputation: 1620

In order to delete/remove a local storage item, the correct method is removeItem(key). Your code should look like this.

logout() {
    localStorage.removeItem(AppConfig.USER_INFO_KEY);
    localStorage.removeItem(CURRENT_BOT);
    localStorage.removeItem(DATE_OBJ);
    this.Service.savedData = {};
    this.Service.dateObj = {};
    this.Service.token = '';
    this.Service.deleteMsg = '';
    this.router.navigate(['/login']);
}

If you are using angular 6+, your service (reports.service.ts) file should have 

@Injectable({
  providedIn: 'root',
})

To inject the ReportService, you must add a private reportService parameter of type ReportService to the constructor as follows.

constructor(private reportService: ReportService) { }

Upvotes: -1

SiddAjmera
SiddAjmera

Reputation: 39482

Strange. Ideally, if the Service is provided in the Root Module, all the places where it is injected as a dependency share the same instance of the service. So if anything changes on the service, it should ideally get reflected in all those components.

Unless you have this service in the SharedModule and then you also have lazy-loaded feature modules. In that case each Lazy Loaded module will receive a different instance of this service.

That's why, Angular condemns providing Services in the Shared Module:

Why? A lazy loaded feature module that imports that shared module will make its own copy of the service and likely have undesirable results.

FIX:

Angular Style Guide recommends for all the services that have state data to be provided in a CoreModule. The CoreModule should then be injected into the AppModule.

Do put a singleton service whose instance will be shared throughout the application in the CoreModule (e.g. ExceptionService and LoggerService).

Also, you should ONLY IMPORT CoreModule in the AppModule

That way there would only be a single instance of these services everywhere in your App(unless of course, you're providing a Service in a Component.)

So you should consider creating a CoreModule if you haven't already and start moving all these services, for which you need a single application-wide instance into the CoreModule.

Also, consider implementing an import guard so that it throws an error if you try to import the CoreModule in any module other than the AppModule

Upvotes: 3

Related Questions