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