Fix bug in protected routing
This commit is contained in:
@@ -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>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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}`} />
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
Reference in New Issue
Block a user