reactjs - 每小时刷新 token 的最佳方法？

Question

我正在使用 React 构建一个网站，每个页面必须发送大约 3 个请求，但首先我必须获得需要每小时刷新一次的通信 token ，然后将其用作所有其他请求的基础要求。

我计划在 App 安装后立即获取它并将其置于状态(redux、thunk)并在每个订阅存储的组件中使用它，然后将 setInterval 函数也放入 componentDidMount 方法中。我想到的另一件事是将它放在本地存储中，但这会有点复杂(每次我从本地存储获取一些东西时我都必须解析)。

class App extends React.Component {
  componentDidMount() {
    this.props.getToken()

    setInterval (this.props.getToken, 5000)
 }

这工作得很好，在页面之间切换不会破坏任何东西，它工作得很好。请注意，这里的 5000 毫秒仅用于尝试，我将其设为 3500000。这可以吗还是有其他方法可以做到这一点？谢谢!

Answer 1

尽管我会做一些更改，但您的实现非常好

使用本地存储，这样您就不必在用户刷新页面时重新获取 token (因为它会从内存中丢失)。使用多个选项卡时，您也将获得同样的好处。您可以轻松创建一些 LocalStorageService这会为您完成所有解析/字符串化，因此您不必担心。

我建议将该逻辑移动到某种服务中，您可以更轻松地控制 token 流 - 例如如果用户注销或以某种方式 token 无效会发生什么？您必须从应用程序以外的其他地方获取新 token (因为 root componentDidMount 只会被调用一次)，并且您还需要清除当前间隔(您将无法引用当前实现)以避免多个间隔。

也许你甚至可以使用 setTimeout 来代替间隔避免在边缘情况下有多个间隔:

getToken() {
    // do your logic
    clearTimeout(this.tokenExpire);
    this.tokenExpire = setTimeout(() => getToken(), 5000);
}

总体而言，您的实现很好 - 只能改进以简化维护，并且您需要涵盖一些边缘情况(至少是上面提到的情况)。