meteor - 限制访问(Meteor + React Router + 角色)

Question

我正在尝试在我的 Meteor 应用程序中使用 React-router 实现 alanning Meteor 角色。一切工作正常，除了我无法正确管理使用 alanning 角色或 Meteor.user()

限制路由

我尝试使用 meteor 角色:

我正在尝试在我的路线上使用onEnter={requireVerified}。这是代码:

const requireVerified = (nextState, replace) => {
    if (!Roles.userIsInRole(Meteor.userId(), ['verified'],'user_default')) {
        replace({
            pathname: '/account/verify',
            state: { nextPathname: nextState.location.pathname },
        });
    }
};

我尝试使用 Meteor.user():

const requireVerified = (nextState, replace) => {
  if (!Meteor.user().isverified == true) {
    replace({
      pathname: '/account/verify',
      state: { nextPathname: nextState.location.pathname },
    });
  }
};

因此，当我单击路线链接时，这是有效的，但是当我手动刷新(F5)时，它不起作用。深入研究后，我发现当我手动刷新页面时 Meteor.user() 尚未准备好。

I know Meteor.userid() or Meteor.logginIn() are working, but i wanted to verify not just that they are logged but if they are "verified" or have a role.

我还尝试使用react检查组件内部，使用componentDidMount()或componentWillMount()，在这两种情况下都是相同的，手动新鲜不会加载在组件挂载之前的Meteor.user()。

那么用meteor/alaning角色+react router来限制组件/路由的最好方法是什么？ (我在 TheMeteorChef 的基础中使用react-komposer)

谢谢。

Answer 1

注意我还没有尝试过，这只是一个建议

您可以尝试的一件事是使用 componentWillReceiveProps与来自“react-meteor-data”的 createContainer 一起，如下所示:

import React, { Component, PropTypes } from 'react';
import { Meteor } from 'meteor/meteor';
import { createContainer } from 'meteor/react-meteor-data';
import { Roles } from 'meteor/alanning:roles';

class MyComponent extends Component {
  componentWillReceiveProps(nextProps) {
    const { user } = nextProps;
    if (user && !Roles.userIsInRole(user._id, ['verified'], 'user_default')) {
      browserHistory.push('/account/verify');
    }
    // If Meteor.user() is not ready, this will be skipped.
  }
}

MyComponent.propTypes = {
  user: PropTypes.object,
};

export default createContainer(() => {
  const user = Meteor.user() || null;
  return { user };
}, MyComponent);

为了解释流程，当页面加载时，正如您所说，Meteor.user() 未定义，因此您无法检查权限。然而，当 Meteor.user() 被定义时，这将触发模板的刷新，并且新的 props 将被传递到 componentWillReceiveProps 。此时您可以检查是否user已定义并在需要时重定向。

为了确保不错过任何内容，我实际上会将验证放在 constructor() 中。以及(定义一个将 props 作为参数的函数，并在 constructor() 和 componentWillReceiveProps() 中调用它)。