ReactJS -在渲染前等待第三方脚本响应

ReactJS - Wait third party script response before render

本文关键字：等待 第三方 脚本 响应 ReactJS      更新时间：2023-09-26

我使用React和flow(带有Rails API后端)在我的前端应用程序中实现了J-Toker，与这个项目的方式类似React -flux-jwt-authentication-sample

仪表板应该只有登录用户才能访问。为了做到这一点，J-Toker调用我的Rails API并返回loggedIn用户(或者如果没有loggedIn…)，可以使用Auth.user访问。

所以我有我的仪表板组件包装在AuthenticatedComponent:

Dashobard.jsx 

export default AuthenticatedComponent(Dashobard);

这是我的AuthenticatedComponent.jsx:

export default (ComposedComponent) => {
  return class AuthenticatedComponent extends React.Component {
    static willTransitionTo(transition) {
      if (!LoginStore.isLoggedIn()) {
        transition.redirect('/login', {}, {'nextPath' : transition.path});
      }
    }
  ...
}

最后这里是我的 logstore。jsx 代码:

import Auth from 'j-toker';
class LoginStore extends BaseStore {
  ...
  isLoggedIn() {
    return Auth.user.signedIn;
  }
}

一切都很好，除了当我手动刷新页面。在本例中，Auth.user.signedIn返回undefined，即使用户已登录并被重定向到登录页面。我发现问题来自Auth.user尚未加载时，LoginStore.isLoggedIn()被调用，因为在这种情况下，Auth.user返回一个空对象，如果我等待一点(用基本的setTimeout测试)，它返回loggedIn用户。

我是React.JS的新手(使用它只有一个星期了)，我不知道如何处理这个问题。我读了很多文章，还不能理解React.JS是如何使用的，特别是与第三方插件(我也有很多问题使用动画插件，但这是另一个故事…)。

有人能帮我一下吗?

发生这种情况是因为当您将配置传递给J-Toker时，库将检查存储的令牌。如果它找到一个，它将用您的API验证令牌。这就是为什么调用configure，它将返回一个jquery Deferred对象，该对象将在验证完成后解析，如果没有存储令牌，则会被拒绝。如果验证通过了您的API，则返回用户对象并在Auth.user中设置。

按照您的示例项目，您可以通过在解析Deferred之后呈现组件来修复此问题。

var promise = Auth.configure({
  apiUrl: 'your-api-host'
});
promise.always(function() {
  router.run(function (Handler) {
   React.render(<Handler />, document.getElementById('content'));
  });
});
相关文章：