Vuejs: Seguridad y autenticación

En el desarrollo de aplicaciones web, la seguridad y autenticación son elementos fundamentales. Con Vue 3.5, disponemos de herramientas y técnicas avanzadas para implementar estas funcionalidades de manera eficiente. En este módulo, abordaremos aspectos clave para asegurar nuestras aplicaciones y gestionar la autenticación de usuarios.

Configuración inicial

Para empezar, debemos asegurarnos de tener un proyecto Vue 3.5 configurado. Si aún no lo tienes, puedes crear uno utilizando Vue CLI:

npm install -g @vue/cli
vue create mi-proyecto
cd mi-proyecto

Instalación de bibliotecas necesarias

Para manejar la autenticación y la seguridad, utilizaremos vue-router para la gestión de rutas y axios para las peticiones HTTP. Instala estas dependencias con:

npm install vue-router axios

Configuración de vue-router

El siguiente paso es configurar vue-router para manejar rutas protegidas. Crea un archivo router.js en la raíz del proyecto:

import { createRouter, createWebHistory } from 'vue-router';
import Home from './views/Home.vue';
import Login from './views/Login.vue';
import Dashboard from './views/Dashboard.vue';

const routes = [
  { path: '/', component: Home },
  { path: '/login', component: Login },
  { path: '/dashboard', 
    component: Dashboard, 
    meta: { requiresAuth: true } 
  },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

router.beforeEach((to, from, next) => {
  const loggedIn = !!localStorage.getItem('user');
  if (to.matched.some(record => record.meta.requiresAuth) && !loggedIn) {
    next('/login');
  } else {
    next();
  }
});

export default router;

Implementación de autenticación

Vamos a crear un servicio de autenticación utilizando axios. Crea un archivo authService.js:

import axios from 'axios';

const API_URL = 'https://api.ejemplo.com/auth';

export const login = async (credentials) => {
  const response = await axios.post(`${API_URL}/login`, credentials);
  if (response.data.token) {
    localStorage.setItem('user', JSON.stringify(response.data));
  }
  return response.data;
};

export const logout = () => {
  localStorage.removeItem('user');
};

export const getCurrentUser = () => {
  return JSON.parse(localStorage.getItem('user'));
};

Componentes de autenticación

Creamos el componente Login.vue para manejar el inicio de sesión:

<template>
  <div>
    <h1>Iniciar sesión</h1>
    <form @submit.prevent="handleLogin">
      <div>
        <label for="username">Usuario</label>
        <input type="text" v-model="form.username" required />
      </div>
      <div>
        <label for="password">Contraseña</label>
        <input type="password" v-model="form.password" required />
      </div>
      <button type="submit">Entrar</button>
    </form>
  </div>
</template>

<script>
import { login } from '../services/authService';

export default {
  data() {
    return {
      form: {
        username: '',
        password: ''
      }
    };
  },
  methods: {
    async handleLogin() {
      try {
        await login(this.form);
        this.$router.push('/dashboard');
      } catch (error) {
        console.error('Error al iniciar sesión', error);
      }
    }
  }
};
</script>

Protección de rutas

Para finalizar, asegúrate de que las rutas sensibles estén protegidas. En el ejemplo anterior, el router.beforeEach se encargará de redirigir a los usuarios no autenticados a la página de inicio de sesión.

Con estos pasos, hemos configurado la seguridad y autenticación básica en una aplicación Vue 3.5. Esta estructura permite expandir y adaptar las funcionalidades de seguridad según las necesidades específicas de cada proyecto.