Tengo una aplicación que admite privilegios para cada usuario. Entonces, si el usuario tiene el permiso apropiado, puede administrar usuarios, grupos, etc. En caso de que el Usuario no tenga dicho permiso, es posible que no lo haga.
Tengo una API de descanso, con un punto final, que devuelve todos los enlaces permitidos para el usuario actual y, con eso, me gustaría configurar las rutas para el react-router . En caso de que se editen los permisos y, por ejemplo, el usuario pierda el permiso para editar usuarios, el elemento de menú correspondiente debería desaparecer del menú y la ruta se eliminaría del enrutador. De lo contrario, se debe agregar un elemento de menú y la ruta.
Ahora mismo tengo esta configuración:
ReactDOM.render( <Provider store={store}> <Router history={history}> <Route path="/" component={Window}> <IndexRoute component={Users} /> <Route path="users" component={Users} /> <Route path="groups" component={Groups} /> <Route path="permissions" component={Permissions} /> <Route path="*" component={Error} /> </Route> </Router> </Provider>, mount);Pero lo que realmente me gustaría tener es: Una función que realice esta configuración dinámicamente y que pueda ejecutarse cada vez que cambien los Permisos.
No pude encontrar ninguna documentación sobre eso y me alegraría si hay una manera de hacerlo.
ACTUALIZAR
De acuerdo con las respuestas dadas y los comentarios, me di cuenta de que la forma en que quería abordar este problema no concuerda con la naturaleza declarativa de react-router.
en uno de mis proyectos tengo la siguiente configuración, creo que le resultará útil:
componentWillMount() { let routes = []; routes.push({ path: '/authenticate', component: LoginPage }); routes.push({ path: '/', component: Main, indexRoute: { component: null }, getChildRoutes: (error, callback) => { getNavigation().then((nav) =>{ callback(null, getChildRoutes(nav.paths)) }) }, onEnter: () => { getNavigation(); let token = getToken(); if (token == null || token === '') redirectToAuthenticationUrl(); } }); this.routes = routes; render() { return ( <Router key={uuid()} history={history} routes={this.routes} /> ); }Puede almacenar sus rutas en un objeto y también pasar una promesa que devolverá sus rutas, también puede verificar los permisos fácilmente de esta manera. ¡Espero que ayude!
Puede usar el accesorio onEnter en Route para la autenticación condicional. Puede verificar si un usuario tiene permiso para ingresar a la vista y, si no lo tiene, navegar hacia otro lugar.
<Route path='/accounts' component={Accounts} onEnter={isAuth} /> const isAuth = (nextState, replace) => { if (!isCurrentUserAuthorised) { replace({pathname: '/'}); } } El método isAuth se ingresa al navegar a /accounts . Obviamente, necesitaría poner su propia lógica para determinar si el usuario está autorizado, pero eso es todo. Simplemente ingrese una ruta de acceso a donde desea que se envíen a los usuarios no autorizados.