Overview
The Biométrico system uses a token-based authentication flow with Vuex for state management and localStorage for persistence. User credentials are validated against the backend API, and upon success, user data and JWT tokens are stored locally.
Authentication Flow
User Submits Credentials
The user enters their username and password in the login form (Signin.vue). The form calls the handleSubmit method on form submission.<form @submit.prevent="handleSubmit">
<input v-model="email" type="name" id="email" placeholder="[email protected]" />
<input v-model="password" :type="showPassword ? 'text' : 'password'" />
<button type="submit">Ingresar</button>
</form>
API Request to Login Endpoint
The login() method sends a POST request to /biometrico/login with the user’s credentials:// src/assets/js/login.js
async login() {
var parametros = {
LoginUsu: this.email.trim(),
ClaveUsu: this.password.trim(),
};
const response = await enviarsolilogin('POST', parametros, this.url2, 'Logueado');
if (response.error) {
mostraralertas(response.mensaje, 'warning');
} else if (response) {
const role = response.Rol;
const tok = response.token;
// Redirect based on role
}
}
Store User Data in Vuex
Upon successful authentication, user data is stored in the Vuex store using mutations. The store automatically syncs with localStorage:// src/store/index.js
mutations: {
setRol_bio(state, nuevoRol) {
state.role = nuevoRol;
localStorage.setItem('Rol_bio', nuevoRol);
},
setemail_bio(state, nuevoemail) {
state.email = nuevoemail;
localStorage.setItem('email_bio', nuevoemail);
},
setToken_bio(state, token) {
state.token = token;
localStorage.setItem('token_bio', token);
},
setTokenType_bio(state, type) {
state.token_type = type;
localStorage.setItem('token_type_bio', type);
}
}
Role-Based Redirection
After storing the token, the system redirects users based on their role:if (role === 'sotics' || role === 'atics' || role === 'sa') {
mostraralertas('LE DAMOS LA BIENVENIDA ADMIN ' + (response.name || ''), 'success');
this.$router.push('/home');
}
Vuex Store Structure
The authentication state is managed in src/store/index.js:
State
state: {
role: localStorage.getItem('Rol_bio') || null,
email: localStorage.getItem('email_bio') || null,
idusu: localStorage.getItem('id_bio') || null,
name: localStorage.getItem('name_bio') || null,
token: localStorage.getItem('token_bio') || null,
token_type: localStorage.getItem('token_type_bio') || null,
}
Getters
getters: {
getIdusu: state => state.idusu,
isAuthenticated: state => !!state.token,
getFullToken: state => `${state.token_type} ${state.token}`,
}
isAuthenticated getter checks if a token exists, while getFullToken formats the complete authorization header.
Logout Flow
To log out a user, call the logout_bio mutation:
mutations: {
logout_bio(state) {
// Clear state
state.role = null;
state.email = null;
state.idusu = null;
state.name = null;
state.token = null;
state.token_type = null;
// Clear localStorage
localStorage.removeItem('Rol_bio');
localStorage.removeItem('email_bio');
localStorage.removeItem('id_bio');
localStorage.removeItem('name_bio');
localStorage.removeItem('token_bio');
localStorage.removeItem('token_type_bio');
localStorage.removeItem('user_bio');
}
}
Using Authentication in Components
Access authentication state in any component:
import { useStore } from 'vuex';
const store = useStore();
const isAuthenticated = computed(() => store.getters.isAuthenticated);
const fullToken = computed(() => store.getters.getFullToken);
API Requests with Authentication
Include the authentication token in API requests:
import API from '@/assets/js/services/axios';
const response = await API.get('/biometrico/estudiantesfoto', {
headers: {
Authorization: store.getters.getFullToken
}
});
The token is automatically retrieved from localStorage when the app initializes, so users remain logged in across sessions.
Security Considerations
- Tokens are stored in localStorage, which is vulnerable to XSS attacks
- Always validate and sanitize user input
- Use HTTPS in production to prevent token interception
- Implement token expiration and refresh mechanisms
