9

I am using a GlobalDataService ( referred from here ) to store response data an from login API on a global variable to be used for some other API calls.

login():

 if (_token) {

    // store username and jwt token in keep user logged in between page refreshes
    console.log(this.gd.currentUserData)
    this.gd.currentUserData['userID']=_id;
    this.gd.currentUserData['username']=username;
    this.gd.currentUserData['token']=_token;
    // return true to indicate successful login
    return true;
}

Then inside xx.service.ts file, I'm accessing this global variable like shown below in the constructor() which is then consumed by various functions to make API calls.

constructor(private http: Http,  private gd: GlobalDataService) {

    let currentUser = this.gd.currentUserData;

     this.token = currentUser && currentUser.token;
     this.userID=currentUser.userID;

}

The Problem

After I logout ( during which data in global variable is cleared ) and then login with another user account, the functions in service.ts is still using previous data stored in those global variable.

inside logout():

this.gd.currentUserData={};
this.gd.currentHospitalData={};

I think the issue is constructor is instantiated only once and hence the new data assigned to global variable in not reflected in .service.ts file.

How can I fix this issue? or Is there a better approach to handle this situation?

Note: Earlier I used localstorage to store these data but since it can be modified via Chrome Dev Tools, I am now considering using global variables.

Update

I know this is hacky and not proper way to do, but I notice that calling window.location.reload(); on logout() solves the issue.

Apparently, this issue seems to have resolved. I had to move my Provider declaration for my services from app.module.ts to a lower level in the app component after which successful login redirects to.

But I'm still looking for a proper solution / approach with login data handling.

devN
  • 832
  • 3
  • 10
  • 23
  • In GlobalDataService.ts have one more method 'reset' to set shareObj to empty object and call it in your logout component. Wont it work for you ? – Paka Dec 12 '17 at 07:05
  • That's what I was doing, but without enclosing them inside a function like `reset()`. But it wasn't working then. Anyhow, apparently the issue seems to have gone now after fiddling in code here and there. Though not sure why it is working now... – devN Dec 12 '17 at 09:38
  • This real issue was I declared Provider for services in `app.module.ts` instead of putting it in component after login – devN Dec 12 '17 at 09:46

2 Answers2

14

The real issue was I had declared Provider for my .service.ts 's inside app.mopdule.ts. This caused the constructor for those services to instantiate only at first load of the app. So when I logged out and logged in again, the newly assigned data was not reflecting in those .service.ts files,

I moved Provider declaration for those services to the component that is being redirected to after a successful login. Now after every successful login, the constructor will instantiate and newly assigned value will be relfected in those .service.ts files.

devN
  • 832
  • 3
  • 10
  • 23
  • 2
    Adding a provider declaration in the component wouldn't help? This just makes a new instance in the redirected component while the rest of the app would use the same old instance. – Ishaan Srivastav May 18 '21 at 05:05
1

"Global variables" can be modified via Chrome dev tools too. It's a bit more difficult though.

If your data isn't sensitiv, then you don't have to worry, you can store it wherever and however you want.

Your issue is, as you said, that the constructor is only called once. Because services are singletons, meaning there's only one and only one instance of them throughout your session.

To resolve this issue, you have several options :

  • Use local storage / session storage
  • Create a method that does what the constructor actually do, and call it on login
  • Make a whole service dedicated to login a user, and use it on each login/logout
  • The data stored in localstorage is not sensitive in nature. These are however used in parameters passed on to POST request which returns sensitive data. So if a user changes `id` value stored in data, he would be able to see data he is not supposed to. – devN Dec 12 '17 at 06:51
  • 1
    Well in this case, the issue isn't Angular, but your endpoint. If you have a user using a token and retrieving data he should not have access to, you have a weak security, and you should resolve that instead. –  Dec 12 '17 at 06:53