Limit Access (Meteor + React Router + Roles)

Question

I am trying to implement alanning Meteor roles with a reactive router in my Meteor application. Everything works fine, except that I cannot properly manage traffic using the alanning or Meteor.user() roles

I tried with the meteor role:

I am trying to use onEnter={requireVerified} on my route. This is the code:

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

I tried to use Meteor.user ():

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

So this works when I click on the route link, but when I update manually (F5), it does not work. After that, I found that Meteor.user() not ready when I manually refresh the page.

I know that Meteor.userid () or Meteor.logginIn () work, but I wanted to check not only that they are registered, but also if they are "checked" or play a role.

I also tried to check inside the component with the reaction componentDidMount() or componentWillMount() , in both cases it is the same, manual fresh does not load Meteor.user() before the container is installed.

So, what is the best way to restrict components / routes using meteorite / alaning roles + react to the router? (I use reactive composter inside TheMeteorChef base)

Thanks.

Answer 1

Note. I haven't tried it yet, this is just a suggestion

One thing you could try is to use componentWillReceiveProps next to createContainer from the "reactive meteorite data" as follows:

 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); 

To explain the flow when the page is loaded, as you said, Meteor.user () is not defined, so you cannot check permissions. However, when Meteor.user () is defined, this will cause the template to be updated, and new details will be passed to componentWillReceiveProps . At this point, you can check if user defined and redirected, if necessary.

To be sure that you don’t miss anything, I would even put the confirmation in constructor() (defining a function that takes props as arguments and calls it both in constructor() and componentWillReceiveProps() ).