Question

我使用React和flow（使用Rails API后端）在我的前端应用程序中实现J-Toker，方式与此项目类似react-flux-jwt-authentication-sample

只有登录用户才能访问仪表板。为了做到这一点，J-Toker调用我的Rails API并返回使用Auth.user可访问的loggedIn用户（如果没有人登录，则返回...）。

所以我将Dashboard组件包装在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});
      }
    }

  ...
}

最后这是我的 LoginStore.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会返回一个空对象，如果我稍等一下（使用basic setTimeout）它返回loggedIn用户。

我是React.JS的新手（现在使用它只有一个星期），我不知道如何处理这个问题。我阅读了大量的文章，无法理解React.JS是如何使用的，特别是第三方插件（我使用动画插件也有很多问题，但它是另一个故事......）。 / p>

有人可以帮我吗？

非常感谢：）

Answer 1

这是因为当您将配置传递给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'));
  });
});

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

1 个答案: