Capítulo 17 – Logout de usuarios – Curso ReactJS y Laravel Directorio de Empresas

Curso ReactJS y Laravel Directorio de Empresas

Capitulo 17 ➜ Logout de usuarios

Logout de usuarios en React JS

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,
        ],

842 visitas

« Capítulo 16 – Login de usuarios

Capítulo 18 – PanelAdmin »

{ Curso ReactJS y Laravel Directorio de Empresas }

Compartir link con tus amigos

Descarga el código del proyecto

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

Comprar

Indice

Puesta en escena

1 Presentación 2 Base de datos 3 Instalación de Laravel y React JS

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