Fix bug in protected routing

This commit is contained in:
John Lyon-Smith
2018-03-02 14:52:18 -08:00
parent d347adcf33
commit 7756963eb2
3 changed files with 43 additions and 33 deletions

View File

@@ -56,39 +56,40 @@ export class App extends Component {
} }
return ( return (
<Column minHeight='100vh'> <Router basename='/'>
<Column.Item height={sizeInfo.headerHeight - sizeInfo.headerBorderWidth}> <Column minHeight='100vh'>
<Box color='#FAFAFA' borderBottom={`${sizeInfo.headerBorderWidth}px solid #B2B2B2`}> <Column.Item height={sizeInfo.headerHeight - sizeInfo.headerBorderWidth}>
<Row minWidth='100vw'> <Box color='#FAFAFA' borderBottom={`${sizeInfo.headerBorderWidth}px solid #B2B2B2`}>
<Row.Item>{headerButtonsLeft}</Row.Item> <Row minWidth='100vw'>
<Row.Item grow /> <Row.Item>{headerButtonsLeft}</Row.Item>
<Row.Item>{headerButtonsRight}</Row.Item> <Row.Item grow />
</Row> <Row.Item>{headerButtonsRight}</Row.Item>
</Box> </Row>
</Column.Item> </Box>
<Column.Item grow /> </Column.Item>
<Column.Item> <Column.Item grow />
<Router basename='/'> <Column.Item>
<Switch> <Switch>
<Route path='/login' component={Login} /> <Route path='/login' component={Login} />
<Route path='/confirm-email' component={ConfirmEmail} /> <Route path='/confirm-email' component={ConfirmEmail} />
<Route path='/reset-password' component={ResetPassword} /> <Route path='/reset-password' component={ResetPassword} />
<Route path='/forgot-password' component={ForgotPassword} /> <Route path='/forgot-password' component={ForgotPassword} />
<ProtectedRoute path='/logout' component={Logout} />
<ProtectedRoute path='/profile' component={Profile} /> <ProtectedRoute path='/profile' component={Profile} />
<ProtectedRoute roles={['administrator', 'normal']} path='/' component={Home} /> <ProtectedRoute path='/users' component={Users} />
<ProtectedRoute roles={['administrator']} path='/users' component={Users} /> <ProtectedRoute path='/teams' component={Users} />
<Route component={Home} />{/* No Match Route */} <ProtectedRoute path='/system' component={Users} />
<ProtectedRoute path='/logout' component={Logout} />
<ProtectedRoute path='/' component={Home} />
</Switch> </Switch>
</Router> </Column.Item>
</Column.Item> <Column.Item grow />
<Column.Item grow /> <Column.Item>
<Column.Item> <Box color='#FAFAFA' borderTop={`${sizeInfo.headerBorderWidth}px solid #B2B2B2`}>
<Box color='#FAFAFA' borderTop={`${sizeInfo.headerBorderWidth}px solid #B2B2B2`}> <Text color='dimmed' margin={10}>{'v' + versionInfo.version} {versionInfo.copyright}</Text>
<Text color='dimmed' margin={10}>{'v' + versionInfo.version} {versionInfo.copyright}</Text> </Box>
</Box> </Column.Item>
</Column.Item> </Column>
</Column> </Router>
) )
} }
} }

View File

@@ -12,6 +12,10 @@ export class ProtectedRoute extends React.Component {
}), }),
} }
static defaultProps = {
roles: ['administrator']
}
constructor(props) { constructor(props) {
super(props) super(props)
this.updateComponent = this.updateComponent.bind(this) this.updateComponent = this.updateComponent.bind(this)
@@ -34,17 +38,17 @@ export class ProtectedRoute extends React.Component {
if (user) { if (user) {
if (user.pending) { if (user.pending) {
// The Api might be in the middle of fetching the user information // The API might be in the middle of fetching the user information
// Return something and wait for login evint to fire to re-render
return <div /> return <div />
} }
let roles = this.props.roles let roles = this.props.roles
if (!roles || roles.includes(user.role)) { if (roles && roles.includes(user.role)) {
return <Route {...this.props} /> return <Route {...this.props} />
} else if (!!user.role && user.role === 'broker') { } else {
return <Redirect to='/broker-dashboard' /> return <Redirect to='/' />
} else if (!!user.role && (user.role === 'employee' || 'administrator' || 'executive')) {
return <Redirect to='/dashboard' />
} }
} else { } else {
return <Redirect to={`/login?redirect=${this.props.location.pathname}${this.props.location.search}`} /> return <Redirect to={`/login?redirect=${this.props.location.pathname}${this.props.location.search}`} />

View File

@@ -1,7 +1,12 @@
import React from 'react' import React from 'react'
import PropTypes from 'prop-types'
import { Row, Column, PanelButton } from 'ui' import { Row, Column, PanelButton } from 'ui'
export class Home extends React.Component { export class Home extends React.Component {
static propTypes = {
history: PropTypes.object
}
render() { render() {
return ( return (
<Column> <Column>
@@ -10,7 +15,7 @@ export class Home extends React.Component {
<Row> <Row>
<Row.Item grow /> <Row.Item grow />
<Row.Item> <Row.Item>
<PanelButton icon='users' text='Users' /> <PanelButton icon='users' text='Users' onClick={() => (this.props.history.replace('/users'))} />
</Row.Item> </Row.Item>
<Row.Item width={30} /> <Row.Item width={30} />
<Row.Item> <Row.Item>