react-aad-msal 清除本地存储。 传递状态

Question

So I've been hitting a wall over this last 2 days. I haven't play around with ract/front end work for close to 2 years so please bear with me.

Scenario:
- load page
- throw stuff in localstorage (query string params)
- navigate to login authorization page (using react-aad-msal for this)
- get back to the main page
- try to retrieve data from localstorage and the keys I've added are missing. There are msal tokens etc present.

Enviroment:
- Chrome
- React plugin for debug

Unexpected twist: this happens at random. For the best part of yesterday it was working. and than the keys I've added started to go awol. Same thing this morning.

To my understanding - if I put something in localstorage, it stays there unless requested to be removed, programmatically or other way.

So what is going on here?

Answer 1

Ok think I got it. It must be behavior of the msal - be it react-aad-msal or actual msal.js it is wrapping around. Anyway, solution proved to be to pass query string in state parameter on AuthenticationParameters when creating the provider omitting the local storage issue all together.

I just pass the query string from component:

<AzureAD
 provider={authProviderWithState(this.props.queryString)}
 reduxStore={this.props.reduxStore}
 forceLogin={false}>

Which is then glued on the top of defaults

export const authProviderWithState = (state) => {
    whichAuthParams.state = state;
    return new MsalAuthProvider(whichConfig, whichAuthParams, LoginType.Redirect);
};

State is simply appended to the callback url used by the authorization endpoint so it works as I need it.