react router Link component breaks authorization

[prakharsingh]

I am facing a problem with the Link component of React router. If I try to visit a restricted route through Link like as: <Link to="/user/profile">Profile</Link> the AuthorizedComponent fails to check if the route is permitted to the user or not. Any help would be appreciated. Thanks

[burczu]

could you provide more info about your configuration of the routing and the constructor content of the class which extends the AuthorizedComponent? This would be very helpful - thanks.

[prakharsingh]

Route configuration:

<Router history={browserHistory}>
    <Route path="/" component={ AppContainer }>
      <IndexRoute component={ Home }/>
      <Route component={ Videos } path="/videos" />
      <Route authorize={['public']} component={ RestrictedContainer }>
        <Route component={ ResetPassword } path="/reset-password/:email/:token" />
      </Route>
      <Route authorize={[ 'user', 'super-user' ]} component={ RestrictedContainer }>
        <Route component={ UserDashboard } path="/user/dashboard" />
        <Route component={ UserProfile } path="/user/profile" />
      </Route>
      <Route authorize={[ 'super-user', 'admin' ]} component={ RestrictedContainer }>
        <Route component={ ConferenceDashboard } path="/user/conferences" />
        <Route component={ LiveConference } path="/user/conferences/:id" />
      </Route>
    </Route>
    <Route component={ NoRoute } path="*" />
  </Router>
```, document.getElementById('app'))

-----------------------------------------------------------------------------------------------------------------------------------------
Restricted Container

import React from 'react';
import { AuthorizedComponent } from 'react-router-role-authorization';
import _ from 'lodash';

import SessionStore from '../../stores/SessionStore';
import { Roles } from '../../constants'

class RestrictedContainer extends AuthorizedComponent {
  constructor(props) {
    super(props);

    const sessionUser = SessionStore.getSessionUser();
    const userRole = _.find(Roles, { role: sessionUser ? sessionUser.role : 'public' });

    this.userRoles = [ sessionUser && sessionUser.role ];
    this.notAuthorizedPath = userRole.homePage;
  };

  render() {
    return (
      <div>
        { this.props.children }
      </div>
    );
  };
}

export default RestrictedContainer;

-----------------------------------------------------------------------------------------------------------------------------------------
In my navbar I am using React Router's Link component 
<Link to="/user/conferences">Conferences</Link>

-----------------------------------------------------------------------------------------------------------------------------------------

The problem here is that the user can access the route "/user/conferences" through link bypassing Resticted Container.

[burczu]

Sorry for the late answer... one more question - what role are in sessionUser and sessionUser.role objects which are assigned to this.userRoles?

[prakharsingh]

@burczu The session user has one role like: { "role": "user" }. As this.userRoles takes an array asargument threfore I have passed it into array.

[Extra-lightwill]

@burczu @prakharsingh did you manage to resolve this issue?