Question

我正在尝试使用我的Meteor应用程序中的react-router实现alanning Meteor-roles。除了我无法正确管理使用分配角色或Meteor.user()

限制路线的事实外，一切正常

我尝试使用流星角色：

我正在尝试在我的路线上使用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()尚未就绪。

我知道Meteor.userid（）或Meteor.logginIn（）正在运行，但我想要不仅要验证它们是否已记录，而且如果它们已经过验证＆＃34;要么有一个角色。

我还尝试使用componentDidMount()或componentWillMount()检查组件内部，Meteor.user()或GET https://$USERNAME:$APIKEY@api.softlayer.com/rest/v3/SoftLayer_Virtual_Guest/$VIRTUALGUESTID/getConsoleAccessLog?resultLimit=0,25，在两种情况下相同，手动新鲜不会加载gService.setResultLimit(new ResultLimit(25));之前竞争对手已经安装好了。

那么使用meteor / alaning角色+反应路由器限制组件/路由的最佳方法是什么？（我在TheMeteorChef的基地内使用react-komposer）

谢谢。

Answer 1

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

您可以尝试的一件事是使用componentWillReceiveProps以及来自“反应 - 流星数据”的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（）被定义时，这将触发模板的刷新，新的道具将传递给componentWillReceiveProps。此时，您可以检查是否已定义user并在需要时重定向。

为了确保不遗漏任何内容，我实际上也会将验证放在constructor()中（定义一个将props作为参数并在constructor()和{{{{}}中调用它的函数） 1}}）。

限制访问（流星+反应路由器+角色）

1 个答案: