Inicio » Cursos » ReactJS y Laravel Directorio de Empresas

Puesta en escena

API Rest | BackEnd

  • 4.Modelos y relaciones
  • 5.Rutas y Controladores
  • 6.Roles de Usuarios admin | client
  • 7.Registro de usuarios
  • 8.Login de usuarios
  • 9.Logout de usuarios
  • 10.CRUD User
  • 11.CRUD Categoría
  • 12.CRUD Empresa

Autenticación en React Js

  • 13.Rutas y Layouts
  • 14.AuthUser - Token
  • 15.Registro de usuarios
  • 16.Login de usuarios
  • 17.Logout de usuarios

Rol Admin | User

  • 18.PanelAdmin
  • 19.UserAll mostrar usuarios
  • 20.UserUpdate Aprobación del usuario

Rol Admin | Categoria

  • 21.CategoriaAll mostrar categorias
  • 22.CategoriaStore Agregar una categoría
  • 23.CategoriaUpdate Actualizar Categoría
  • 24.CategoriaDelete Borrar categoría

Rol Admin | Empresa

  • 25.EmpresaAll mostrar empresas
  • 26.EmpresaUpdate aprobar empresa

Rol Client | Empresa

  • 27.Panel Client
  • 28.EmpresaAll mostrar empresas
  • 29.EmpresaStore Agregar empresa
  • 30.EmpresaUpdate Actualizar Empresa

Páginas públicas

  • 31.Rutas y Mockups
  • 32.Página Home
  • 33.Componente Search
  • 34.Componente Modal
  • 35.Página Categorías
  • 36.Página Categoría

Extras

  • 38.Diseño con Bootstrap

Curso ReactJS y Laravel Directorio de Empresas

Lección: 17 ➜ Logout de usuarios

Logout de un usuario con el Rol Admin y Client en React JS

Lección 17: Logout de usuarios

Logout de un usuario con el Rol Admin y Client en React JS

 

Config.jsx

getLogout:(data)=>axios.post(`${base_api_url}/auth/logout`,data)

 

bootstrap.js


import axios from 'axios';
window.axios = axios;
axios.defaults.withCredentials = true;
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

 

Navbar.jsx

import React from 'react'
import AuthUser from '../pageauth/AuthUser'
import Config from '../Config'

const Navbar = () => {

  const {getRol,getLogout, getToken} = AuthUser()

  const logoutUser =()=>{
    Config.getLogout('/logout')
    .then(response=>{      
      getLogout()
    }).catch(error => {
      console.error(error);
    })
  }

  const renderLinks = () =>{
    if(getToken()){
      return(
        <>
        <li className="nav-item">
          <a className="nav-link" href={`/${getRol()}`}>Administración</a>
        </li>
        <li className="nav-item">
          <a className="nav-link" href="#" onClick={logoutUser}>Logout</a>
        </li>
        </>
      )
    }else{
      return(
        <>
        <li className="nav-item">
          <a className="nav-link" href="/login" >Login</a>
        </li>
        </>
      )
    }
  }


  return (
    <nav className="navbar navbar-expand-lg bg-body-tertiary">
  <div className="container-fluid">
    <a className="navbar-brand" href="/">DIREMP</a>
    <button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span className="navbar-toggler-icon"></span>
    </button>
    <div className="collapse navbar-collapse" id="navbarNav">
      <ul className="navbar-nav">
        <li className="nav-item">
          <a className="nav-link active" aria-current="page" href="/">Home</a>
        </li>
        <li className="nav-item">
          <a className="nav-link" href="/categorias">Categorias</a>
        </li>
        { renderLinks()}
      </ul>
    </div>
  </div>
</nav>
  )
}
export default Navbar

 

En kernel.php

'api' => [
            \Laravel\Sanctum\Http\Middleware\EnsureFrontendRequestsAreStateful::class,
            \Illuminate\Routing\Middleware\ThrottleRequests::class.':api',
            \Illuminate\Routing\Middleware\SubstituteBindings::class,
        ],

 

 


582 visitas

Descarga el código del proyecto

Descarga el código fuente del proyecto adquiriendo el curso completo

Descargar ahora

Más cursos que pueden interesarte

Más cursos

Codea Codea App

México, Colombia, España, Venezuela, Argentina, Bolivia, Perú

© Todos los derechos reservados Codea App | ...de frente al código!!! | 2020 - 2023