Actualmente estoy contruyendo una pagina en react y almaceno la sesión en el local storage. Claro debo mejorar eso para temas de sesión, pero no he encontrado aún una manera optima de hacerlo. Sucede que todos los componentes cargan en el App.js y le tengo un Navbar en donde muestra los permisos del usuario.
import { BrowserRouter as Router, Route, Switch, withRouter, Link, useHistory } from 'react-router-dom';
import './App.css';
import axios from 'axios';
import React, { useState, useEffect } from 'react';
import config from './resources/config/config';
import Ventas from './Ventas/';
import VentasCreate from './Ventas/create';
import VentasEdit from './Ventas/edit';
import ReporteVenta from './Admin/ventas';
import Usuarios from './Admin/usuarios';
import Navbar from './layout/Navbar';
import Footer from './layout/Footer';
import Login from './login';
function App() {
let history = useHistory(); //The useHistory hook gives you access to the history instance that you may use to navigate.
// On Page load display all records
const [permisos, setPermisos] = useState([]);
const loadPermisos = async (id) => {
var resPermisos = await axios.get(`${config.urlServer}/permisos/${id}`);
setPermisos(resPermisos.data);
};
useEffect(
() => {
let user = JSON.parse(localStorage.getItem('currentUser'));
if (user[0] !== null || user[0] !== undefined) {
loadPermisos(user[0].usu_id);
} else {
history.push('/login');
}
},
[history]
);
return (
<Router>
<Switch>
<Route exact path="/ventas/create" component={VentasCreate} />
<Route exact path="/ventas/index" component={Ventas} />
<Route exact path="/ventas/edit:id" component={VentasEdit} />
<Route exact path="/admin/ventas" component={ReporteVenta} />
<Route exact path="/admin/usuarios" component={Usuarios} />
<Route exact path="/" component={Login} />
</Switch>
</Router>
);
}
export default App;
// descomentar y pasar a un excel. Es la consulta de permisos que tengo en la base de datos
// prm_id prm_parentesco prm_nombre prm_url prm_componente prm_perm_father
// 1 1 Registrar_venta /ventas/create NULL NULL
// 2 3 Consultar_ventas realizadas /ventas/index NULL 1
// 4 4 Editar_venta /ventas/edit NULL 1
// 4 1 Reportes_de_venta /admin/ventas NULL NULL
// 5 3 Usuarios /admin/usuarios NULL 5
Hasta ahí funciona, pero tengo un problema. Si un vendedor se sabe la url para consultar las ventas y ver todos los usuarios lo puede hacer sin problemas. Según me documente, al no cargar el componente en el Switch
yo no le carga el componente.
He intentado realizar un getRoutes .
const getRoutes = (routes) => {
return routes.map((prop, key) => {
if (routes.length > 0) {
return (
<Route
path={prop.prm_url}
render={(props) => <prop.prm_componente {...props} />}
key={key}
/>
);
} else {
return null;
}
});
};
y llamarlo:
<div className="wrapper">
<div className="main-panel" ref={mainPanel}>
<Navbar />
<div className="content">
<Switch>{getRoutes(permisos)}</Switch>
</div>
<Footer />
</div>
</div>
Actualmente en cada component me importo el <Navbar/>
y el <Footer/>
pero eso no está bien. Quiero dejarlo definido en el App.js y ademas el login claro que no debe contener el <Navbar/>
y el <Footer/>
Ahí voy. Aún no he conseguido que funcione. Quedo atento...