localstorage 在页面刷新时在 react-redux 应用程序中返回“未定义”

Posted 2023-03-10

【中文标题】localstorage 在页面刷新时在 react-redux 应用程序中返回“未定义”

【英文标题】：localstorage returning 'undefined' in react-redux app on page refresh

【发布时间】：2020-08-25 09:50:50

【问题描述】：

我正在使用 react-redux 应用程序并尝试将我的身份验证令牌存储在本地存储中。一旦我的登录 api 调用完成，我将 auth-token 放入 localStorage，如下所示：

function loginSuccess(response) 
  const  accessToken, refreshToken = response;
  localStorage.setItem('accessToken', accessToken);
  localStorage.setItem('refreshToken', refreshToken);

当我重新加载网页时，在我的 App.js 中，当我尝试检索 accessToken 和 refreshToken 时，都返回“未定义”。这是为什么呢？

class App extends React.Component 
  constructor(props) 
    super(props);    ;
    if (localStorage.getItem('accessToken')) 
      authenticationActions.resetHeader();
    
  

【问题讨论】：

我要警告你localStorage 是不安全的。在localStorage 中放置一个刷新令牌（甚至是访问令牌）是一个非常糟糕的主意。另外，您使用 JWT 标记了问题，所以我假设您也将这些问题保存在 localStorage 中，这也非常危险：medium.com/redteam/…

我怀疑您的问题是response 对象不包含值accessToken 或refreshToken。如果它是一个Response 对象（即来自 Fetch API），那么您需要等待response.json() Promise 解析，它将包含数据。

我在执行 localstorage.getItem('accessToken') 的地方放了断点，发现等待一段时间后，返回值。看起来它需要一些时间。这是常见的行为吗？

【参考方案1】：

通常，如果您处于隐身模式，就会发生这种情况。失败...使用调试器并确保accessToken 和refreshToken 不是undefined。如果刷新失败，loginSuccess 函数正在运行，debugger 再次是你的朋友。

【讨论】：

这是个好建议，问题可能是他试图从Response 对象中提取数据。 OP 需要从响应中提取数据，所以这个资源可能有用：developer.mozilla.org/en-US/docs/Web/API/Response