添加角色

Created: November-22, 2018

1-添加角色包（ https://github.com/alanning/meteor-roles）

meteor add alanning:roles

2-创建一些角色常量。在文件 imports / api / accounts / roles.js 中

const ROLES = {
  ROLE1: 'ROLE1',
  ROLE2: 'ROLE2',
  ADMIN: 'ADMIN'
};

export default ROLES;

3-我不会展示如何在用户上添加/更新角色，只需提及在服务器端，你可以通过 Roles.setUserRoles(user.id, roles); 设置用户角色在 https://github.com/alanning/meteor-roles 中查看更多信息和 http://alanning.github.io/meteor-roles/classes/Roles.html

4-假设你已经设置了所有帐户和角色文件（请参阅 https://github.com/rafa-lft/Meteor_React_Base 中的完整示例。查找标签 Step4_roles ）我们现在可以创建一个负责允许的方法（或不）访问不同的路线。在 imports / startup / client / Routes.jsx 中

class Routes extends Component {
  constructor(props) {
    super(props);
  }

  authenticate(roles, nextState, replace) {
    if (!Meteor.loggingIn() && !Meteor.userId()) {
      replace({
        pathname: '/login',
        state: {nextPathname: nextState.location.pathname}
      });
      return;
    }
    if ('*' === roles) { // allow any logged user
      return;
    }
    let rolesArr = roles;
    if (!_.isArray(roles)) {
      rolesArr = [roles];
    }
    // rolesArr = _.union(rolesArr, [ROLES.ADMIN]);// so ADMIN has access to everything
    if (!Roles.userIsInRole(Meteor.userId(), rolesArr)) {
      replace({
        pathname: '/forbidden',
        state: {nextPathname: nextState.location.pathname}
      });
    }
  }

  render() {
    return (
      <Router history={ browserHistory }>
        <Route path="/" component={ App }>
          <IndexRoute name="index" component={ Index }/>
          <Route name="login" path="/login" component={ Login }/>
          <Route name="signup" path="/signup" component={ Signup }/>

          <Route name="users" path="/users" component={ Users }/>

          <Route name="editUser" path="/users/:userId" component={ EditUser }
                 onEnter={_.partial(this.authenticate, ROLES.ADMIN)} />

          {/* ********************
           Below links are there to show Roles authentication usage.
           Note that you can NOT hide them by
           { Meteor.user() && Roles.userIsInRole(Meteor.user(), ROLES.ROLE1) &&
           <Route name=.....
           }
           as doing so will change the Router component on render(), and ReactRouter will complain with:
           Warning: [react-router] You cannot change <Router routes>; it will be ignored

           Instead, you can/should hide them on the NavBar.jsx component... don't worry: if someone tries to access
           them, they will receive the Forbidden.jsx component
           *************/ }
          <Route name="forAnyOne" path="/for_any_one" component={ ForAnyone }/>

          <Route name="forLoggedOnes" path="/for_logged_ones" component={ ForLoggedOnes }
                 onEnter={_.partial(this.authenticate, '*')} />

          <Route name="forAnyRole" path="/for_any_role" component={ ForAnyRole }
                 onEnter={_.partial(this.authenticate, _.keys(ROLES))}/>

          <Route name="forRole1or2" path="/for_role_1_or_2" component={ ForRole1or2 }
                 onEnter={_.partial(this.authenticate, [ROLES.ROLE1, ROLES.ROLE2])} />

          <Route name="forRole1" path="/for_role1" component={ ForRole1 }
                 onEnter={_.partial(this.authenticate, ROLES.ROLE1)}/>

          <Route name="forRole2" path="/for_role2" component={ ForRole2 }
                 onEnter={_.partial(this.authenticate, ROLES.ROLE2)} />

          <Route name="forbidden" path="/forbidden" component={ Forbidden }/>

          <Route path="*" component={ NotFound }/>
        </Route>
      </Router>
    );
  }
}

我们在某些路线上添加了一个 onEnter 触发器。对于那些路线，我们也通过允许哪些角色进入。请注意，onEnter 回调最初接收 2 个参数。我们使用下划线的部分（ http://underscorejs.org/#partial），添加另一个（角色） authenticate 方法（由 onEnter 调用）接收角色，并且：

检查用户是否完全登录。如果没有，请重定向到’/ login’。
如果 role ===’*‘我们假设任何登录用户都可以输入，所以我们允许它
否则，我们验证是否允许用户（Roles.userIsInRole），如果不允许，我们重定向到禁止。
（可选）你可以取消注释一行，以便 ADMIN 可以访问所有内容。

该代码包含几个允许任何人（不允许 onEnter 回调），任何已记录用户，任何具有至少 1 个角色的已记录用户以及特定角色的路径的示例。

另请注意，ReactRouter（至少在版本 3 上）不允许在 Render 上修改路由。因此，你无法隐藏 Routes.jsx 中的路由。因此，我们在 authenticate 方法中重定向到/禁止。

5- ReactRouter 和 Meteor 的常见错误，与未显示的用户状态更新有关。例如，用户已注销，但我们仍在导航栏上显示他/她的名字。这是因为 Meteor.user() 发生了变化，但我们没有重新渲染。

可以通过在 createContainer 中调用 Meteor.user() 来解决该错误。以下是 import / ui / layouts / NavBar.jsx 中使用的示例：

export default createContainer((/* {params}*/) =>{
  Meteor.user(); // so we render again in logout or if any change on our User (ie: new roles)
  const loading = !subscription.ready();
  return {subscriptions: [subscription], loading};
}, NavBar);

注意：

我正在跳过你需要的其他文件，以缩短时间。具体来说，检查 imports / startup / server / index.js imports / ui / layouts / {App，NavBar} .jsx 和 import / ui / pages / {Login，Signup，Users，EditUser} .jsx
你可以在 https://github.com/rafa-lft/Meteor_React_Base 中查看完整示例。寻找标签 Step4_roles