Checksum was invalid when checking user role in component using ssr


#1

I am using flowrouter ssr along with react.
In the component I want to restrict the content to admin role only, here is what I did:

 export default class AdminArea extends React.Component {
	constructor(props) {
		super(props);

		this.state = {
			subcription : {
				user : User.isAdmin()
			}
		}
	}


	componentWillMount() {
		this.state.subcription.user;
	}

	
	render() {

		if(Roles.userIsInRole(Meteor.user(),   ['admin'])){

			return (				
				<div>
					<p>Here is the admin area</p>
				</div>			
			)

		
		}

		return (
			<div>
				<p>You are not admin, get out!</p>
			</div>
		)
		

	}
}

The problem here is whenever I load this page with admin role, first I will see the ‘You are not admin, get out!’ error, and then update to the admin area. And when the admin content loaded, I get this warning:

Warning: React attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. React injected new markup to compensate which works but you have lost many of the benefits of server rendering. Instead, figure out why the markup being generated is different on the client or server…:

How to solve this problem??

I using the _componentWillMount_method to make sure the User object loaded first, but still no avail.
Note that this AdminArea component is the child component, there is a parent layout component that do the authentication . I don’t know if this is problem.