Manejar el token de autenticación en Laravel Sanctum para una Rest Api

- Andrés Cruz

In english
Manejar el token de autenticación en Laravel Sanctum para una Rest Api

En la entrada anterior vimos, cómo manejar crear el token de acceso en Laravel Sanctum; en esta entrada, veremos cómo manejar el token de autenticación en Laravel Sanctum mediante Vue en una cookie; específicamente, el token generado por Laravel Sanctum a través del login, registrarlo en una cookie y consumirlo al iniciar la aplicación en Vue.

Vamos a partir de un proyecto creado en Laravel en la cual configuramos Vue en un proyecto en Laravel.

Instalar plugin para la cookie

Vamos a instalar un plugin para manejar las Cookies en Vue 3:

https://www.npmjs.com/package/vue3-cookies

Ejecutamos en la terminal:

$ npm install vue3-cookies --save

Configurar el plugin en el proyecto

Su uso es muy sencillo vamos a primero a inicializar el plugin de la cookie en el proyecto, para ello, usaremos el archivo de configuración de la aplicación:

import { createApp } from "vue";
//tailwind
import '../../css/vue.css'
// Oruga
import Oruga from '@oruga-ui/oruga-next'
import '@oruga-ui/oruga-next/dist/oruga.css'
import '@oruga-ui/oruga-next/dist/oruga-full.css'
import '@oruga-ui/oruga-next/dist/oruga-full-vars.css'
//Material Design
import "@mdi/font/css/materialdesignicons.min.css"
import axios from 'axios'
import App from "./App.vue"
import router from "./router"
import VueCookies from 'vue3-cookies'
const app = createApp(App).use(Oruga).use(router)
app.use(VueCookies);
app.config.globalProperties.$axios = axios
window.axios = axios
app.mount("#app")

En el script anterior, tenemos otros plugins configurados, en este caso, Oruga UI con Laravel y Vue, ya que, este es un proyecto que forma parte de mi curso completo sobre Laravel.

Uso de las cookies

Ya con esto, podemos hacer uso de la cookie y con esto, poder guardar valores:

this.$cookies.set(keyName,'value');

U obtenerlos:

$cookies.get(keyName)

Como puedes ver, su uso una vez configurado, es extremadamente sencillo.

Configurar vue3-cookies con los datos de autenticación

Vamos a crear una función para establecer los valores de usuario en el componente padre, con lo cual, podremos usarlo en cualquier parte de la aplicación mediante los componentes hijos:

resources\js\vue\App.vue

setCookieAuth(data) {
  this.$cookies.set("auth", data);
},

La misma, la usaremos desde el login:

resources\js\vue\componets\Auth\Login.vue

submit() {
  this.cleanErrorsForm();
  return this.$axios
    .post("/api/user/login", this.form)
    .then((res) => {
   this.$root.setCookieAuth({
        isLoggedIn: res.data.isLoggedIn,
        token: res.data.token,
        user: res.data.user,
      });
   ***
}

La función anterior, es la que usamos para configurar la cookie de autenticación en el proyecto al momento de hacer el login desde la aplicación; la función de login en Laravel es:

    public function login(Request $request)
    {
        $credentials = [
            'email' => $request->email,
            'password' => $request->password
        ];


        if (Auth::attempt($credentials)) {
            $token = Auth::user()->createToken('myapptoken')->plainTextToken;
            session()->put('token', $token);


            return response()->json([
                'isLoggedIn' => true,
                'user' => auth()->user(),
                'token' => $token,
            ]);
        }
        return response()->json("Usuario y/o contraseña inválido", 422);
    }
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.