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.
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