时间戳

首页 > 解决方案 > react-aad-msal 清除本地存储。传递状态

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

问题描述

所以在过去的两天里，我一直在碰壁。我已经有将近 2 年没有玩过 ract/前端工作了，所以请多多包涵。

场景：
- 加载页面
- 在 localstorage 中扔东西（查询字符串参数）
- 导航到登录授权页面（为此使用 react-aad-msal）
- 返回主页
- 尝试从 localstorage 和密钥中检索数据我'已添加丢失。存在 msal 令牌等。

环境：
- Chrome
- 用于调试的 React 插件

意外的转折：这是随机发生的。对于昨天最好的部分，它正在工作。而且我添加的钥匙开始失控了。今天早上也是一样。

据我了解-如果我将某些内容放在本地存储中，除非要求以编程方式或其他方式删除，否则它会保留在那里。

那么这里发生了什么？

标签： javascriptreactjslocal-storagefrontendreact-aad-msal

解决方案

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.

推荐阅读