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

359 visitas