LogOut, destruir la sesión en Laravel Sanctum junto con Vue

- Andrés Cruz

In english
LogOut, destruir la sesión en Laravel Sanctum junto con Vue

Anteriormente, vimos cómo manejar el login y el uso de los tokens mediante Cookies usando Vue; todo esto, para dominar el uso de Laravel Sanctum aplicado a la protección de una Rest Api consumida desde Vue.

Como parte del proceso, es necesario poder destruir la sesión, así que, para ello, usaremos la siguiente implementación.

Para implementar la opción de logout en la aplicación, crearemos una función que se encarga de eliminar la sesión:

app\Http\Controllers\Api\UserController.php

public function logout()
{
    session()->flush();
    return response()->json("Ok");
}

Creamos la ruta:

routes\api.php

Route::post('user/logout', [UserController::class, 'logout']);

Creamos un botón para cerrar la sesión, el cual colocaremos en el componente padre, para que pueda ser reutilizado automáticamente en los componentes hijos:

resources\js\vue\App.vue

<template>
  <nav class="bg-white border-b border-gray-100" >
    <header>
      <div class="flex gap-3 bg-gray-200">
        <nav-item :to="{ name: 'index' }" title="Cursos" />
        <router-link :to="{ name: 'login' }">login</router-link>
        <router-link to="">register</router-link>
        <o-button variant="danger" @click="logout">Close sesion</o-button>
      </div>
    </header>
  </nav>
  <router-view></router-view>
</template>

Y el script que implementa la función anterior:

logout(e) {
  e.preventDefault();
  this.$axios
    .post("/api/user/logout")
    .then(() => {
      window.location.href = "/vue";
    })
    .catch(function () {
      window.location.href = "/vue";
    });
},

Como puedes darte cuenta, al realizar la petición HTTP, redireccionamos a la raíz de la aplicación, usamos primitivas de JavaScript en vez de la navegación SPA para recargar toda la página y con esto, los tokens de acceso; también pudieras usar la función de logout que se encuentra definida al instalar Laravel Breeze:

this.$axios.post("/logout")

Ya que, a la final lo que hacemos es destruir la sesión desde Laravel.

Andrés Cruz

Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz en Udemy

Acepto recibir anuncios de interes sobre este Blog.