0

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...

6
  • Deberíaas de utilizar alguna técnica de autorización. Una técnica usada ampliamente es el uso de un API de autorización utilizando JasonWebTokens (JWT). Cuándo un usuario se identifica ante tu API (como por ejemplo cuando inicia sesión) se le da un token que se agrega a todos los request futuros por medio de un header, así tu API puede saber quién es y a qué datos tiene acceso. Y por consiguiente puede negar acceso a información sensible.
    – FranAcuna
    Commented el 11 nov. 2021 a las 22:10
  • Muy bien, me pondré a estudiar al respecto. Sin embargo he estado viendo y generalmente lo hacen con gestores de plantillas ej: ejs, y yo lo estoy realizando con Hooks. Existe algún video interesante que explique los JWT como lo plantea.
    – Weizman
    Commented el 12 nov. 2021 a las 3:59
  • En español no conozco de ninguna documentación referente a JWT, sin embargo, todo esto depende fuertemente de tu arquitectura ya que hay que hacer la implementación del token tanto en tu backend como en tu frontend.
    – FranAcuna
    Commented el 12 nov. 2021 a las 15:57
  • Usar o no usar hooks no está relacionado al tema de autorización. Lo que haces es obtener el JWT de tu backend (haciendo login) y luego usas ese token como header en TODOS los request que haces a tu API. Hay gente que usa alguna librería para hacer request como axios y configuran todos los pedidos en ella para que tengan el header. O también hay gente que usa fetch y le hace un wrapper que le incluya siempre el token en los headers. Por lo general, el token se guarda en LocalStorage y no tienes que preocuparte por ni si quiera usar useState para manejarlo.
    – FranAcuna
    Commented el 12 nov. 2021 a las 16:05
  • En Ingles estan los mejores contenidos. Además todo programador debe poder defenderse. Si me los pasas, estaría agradecido. Muchas gracias por participar...
    – Weizman
    Commented el 30 nov. 2021 a las 3:16

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

Examina otras preguntas con la etiqueta o formula tu propia pregunta.