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

View File

@@ -12,6 +12,10 @@ export class ProtectedRoute extends React.Component {
}),
}
static defaultProps = {
roles: ['administrator']
}
constructor(props) {
super(props)
this.updateComponent = this.updateComponent.bind(this)
@@ -34,17 +38,17 @@ export class ProtectedRoute extends React.Component {
if (user) {
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 />
}
let roles = this.props.roles
if (!roles || roles.includes(user.role)) {
if (roles && roles.includes(user.role)) {
return <Route {...this.props} />
} else if (!!user.role && user.role === 'broker') {
return <Redirect to='/broker-dashboard' />
} else if (!!user.role && (user.role === 'employee' || 'administrator' || 'executive')) {
return <Redirect to='/dashboard' />
} else {
return <Redirect to='/' />
}
} else {
return <Redirect to={`/login?redirect=${this.props.location.pathname}${this.props.location.search}`} />

View File

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