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.
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter