0

Necesitaba hacer una restricción en mi menú para que la vista de admin solo pudieran verla los que cuentan con el role de admin, esto se pudo realizar con un ternario dentro de la ruta en el menú se manda a llamar los datos que se guardan en el localStorage y se ingresa al objeto user y se destructura la propiedad isAdmin: esta propiedad tiene un valor de true o false dependiendo el role, al momento de dar en salir y eliminar los datos del localStorage aparece el siguiente error TypeError: Cannot read property 'user' of null.

import AuthService from '../Componentes-login/service/auth.service';

const MenuToggle = (props) => {
  const [link, setLink] = useState(false);
  const aside = createRef(true);
  const hide = createRef(true);
  const {isAdmin}  = AuthService.getCurrentUser().user;
  
const changeWidth = () => {
    if (
      aside.current.style.width !== '3.44em' &&
      hide.current.style.display !== true
    ) {
      aside.current.style.width = '3.44em';
      hide.current.style.display = 'none';
    } else {
      aside.current.style.width = '12.5em';
      hide.current.style.display = 'unset';
    }
  };
  const logOut = () => {
    AuthService.logout();
  };

  const redirectLink = () => {
    setLink({
      redirect: true,
    });
    logOut();
  };

  const renderRedirect = () => {
    if (link.redirect) {
      return <Redirect to='/' />;
    }
  };

  return (
    <div className='aside' ref={aside}>
      <div className='menu-toggle'>
        <div className='contenedor-titulo'>
          <div className='hamburger' id='btn' onClick={changeWidth}>
            <div className='_layer -top'></div>
            <div className='_layer -mid'></div>
            <div className='_layer -bottom'></div>
          </div>
        </div>

        <div className='nav-menu'>
          <div className='div-logoW'>
            <img ref={hide} src={LogoW2} alt='' className='logoW-content' />
          </div>
          <div className='div-link'>
            <Link to='/vista/dashboard' className='Link L-dashboard'>
              <i className='material-icons md-24'>dashboard</i>
              <div className='textMenu'>Dashboard</div>
            </Link>
            <Link to='/vista/boletines' className='Link L-boletines'>
              <span className='material-icons md-24'>add_circle</span>
              <div className='textMenu'>Crear Boletin</div>
            </Link>
            <Link to='/vista/listado' className='Link L-listado'>
              <span className='material-icons md-24'>view_list</span>
              <div className='textMenu'>Listado boletines</div>
            </Link>
            <Link to='/vista/miperfil' className='Link L-miperfil'>
              <i className='material-icons md-24'>person</i>
              <div className='textMenu'>Mi Perfil</div>
            </Link>
            { isAdmin ? (
              <Link to='/vista/admin' className='Link L-admin'>
                <span className='material-icons md-24'>
                  admin_panel_settings
                </span>
                <div className='textMenu'>Administración</div>
              </Link>
            ) : null}
          </div>
        </div>
      </div>
      <div className='conteiner-btnOut'>
        {renderRedirect()}
        <button
          to='/'
          type='submit'
          onClick={() => redirectLink()}
          className='Link link-out'
        >
          <i className='material-icons md-24'>exit_to_app</i>
          <div className='textMenu textOut'>Salir</div>
        </button>
      </div>
    </div>
  );
};

export default MenuToggle;
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

introducir la descripción de la imagen aquí

2 respuestas 2

0

Este ocurre porque cuando haces logout seguramente estarás vaciando el localStorage y por eso en el siguiente render AuthService.getCurrentUser().user; es null.

Puedes resolverlo así

const user = AuthService.getCurrentUser();
// si la propiedad user existe que devuelva el valor de isAdmin de lo contrario setee a  false el isAdmin
const isAdmin  = user ? user.isAdmin : false;

Otra opción en AuthService crear el siguiente método.

isAdmin() {
  const user = AuthService.getCurrentUser();
  return user ? user.isAdmin : false;
}

// en tu componente
const isAdmin  = AuthService.isAdmin();
8
  • si hago el metodo en el AuthService sigue marcando el mismo error, no acepta el .user al final pero sin este no permite accesar al valor de isAdmin.
    – myrna
    Commented el 16 oct. 2020 a las 21:23
  • pruebalo ahora acabo de actualizar la respuesta.
    – hawks
    Commented el 16 oct. 2020 a las 21:24
  • Si el user es null quiere decir que no está logueado el usuario, por lo tanto, no es admin y la propiedad isAdmin será false siempre y no hace falta accederla porque no tienes el user.
    – hawks
    Commented el 16 oct. 2020 a las 21:27
  • de esta forma funciona solo que no me muestra en el menú la parte de administrador. {isAdmin ? ( <Link to='/vista/admin' className='Link L-admin'> <span className='material-icons md-24'> admin_panel_settings </span> <div className='textMenu'>Administración</div> </Link> ) : null}
    – myrna
    Commented el 16 oct. 2020 a las 21:39
  • 1
    Mil gracias por todo fue de mucha ayuda
    – myrna
    Commented el 16 oct. 2020 a las 22:46
0

Este problema lo pude resolver haciendo una función y agregando un if para la propiedad user, que cuando fuera diferente de null hiciera toda la funcional que ya se había planteado, y en vez de llamar solo a la propiedad isAdmin de localStorage llamar toda la información y dentro de la función acceder a la priopiedad isAdmin, dentro del render solo mando a llamar la función isAdmin de la siguiente forma {isAdmin()}.

const user = AuthService.getCurrentUser();

  const isAdmin = () => {
    if (user !== null) {
      if (user.user.isAdmin === true) {
        return (
          <Link to="/vista/admin" className="Link L-admin">
            <span className="material-icons md-24">admin_panel_settings</span>
            <div className="textMenu">Administración</div>
          </Link>
        );
      }
    }
  };
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Tu Respuesta

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

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.