我需要检查用户是否有权访问路由路径,权限数据来自后端服务器。
这是我在Routes类中的方法。
=
checkPermission( nextState ) {
// Map path name to backend controller and action
var backendControllerAction = ''
const pathToGo = nextState.location.pathname
if( pathToGo === '/warehouses' ) {
backendControllerAction = 'WarehouseController@View'
} else if ( pathToGo === '/warehouse/add' ) {
backendControllerAction = 'WarehouseController@Create'
} else if ( pathToGo === '/warehouse/update' ) {
backendControllerAction = 'WarehouseController@Update'
}
restRequest( 'post', '/myperms', { path: backendControllerAction } ).then( ( res ) => {
if( res !== true ) {
window.location = '/#/dashboard'
}
} )
}
是axios的包装器,我们使用它与后端进行通信。
在路由中restRequest
会调用checkPermission
事件,如下所示:
onEnter
但是<Route path='warehouses' onEnter={this.checkPermission} component={Warehouse}/>
的重定向或返回错误不会阻止路由。
我想要做的是在用户无权访问路由并将用户重定向到其他路由时阻止路由。