Seguridad y autenticación

Vuejs
Vuejs
Actualizado: 14/02/2025

¡Desbloquea el curso completo!

IA
Ejercicios
Certificado
Entrar

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

Guarda tu progreso

Inicia sesión para no perder tu progreso y accede a miles de tutoriales, ejercicios prácticos y nuestro asistente de IA.

Progreso guardado
Asistente IA
Ejercicios
Iniciar sesión gratis

Más de 25.000 desarrolladores ya confían en CertiDevs

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.

Completa Vuejs y certifícate

Únete a nuestra plataforma y accede a miles de tutoriales, ejercicios prácticos, proyectos reales y nuestro asistente de IA personalizado para acelerar tu aprendizaje.

Asistente IA

Resuelve dudas al instante

Ejercicios

Practica con proyectos reales

Certificados

Valida tus conocimientos

Más de 25.000 desarrolladores ya se han certificado con CertiDevs

⭐⭐⭐⭐⭐
4.9/5 valoración