Overview
The Biométrico application uses Vuex for centralized state management. The store primarily handles user authentication state and persists data to localStorage for session persistence.
Source: src/store/index.js
State
The store maintains the following state properties:
User’s role in the system. Retrieved from localStorage key Rol_bio. Valid roles include:
sotics: SOTICS staffatics: ATICS staffsa: System administrator
User’s email address. Retrieved from localStorage key email_bio.
User’s ID. Retrieved from localStorage key id_bio.
User’s full name. Retrieved from localStorage key name_bio.
JWT authentication token. Retrieved from localStorage key token_bio.
Token type (typically “Bearer”). Retrieved from localStorage key token_type_bio.
Getters
The store provides the following getters for accessing computed state:
getIdusu
Returns the current user’s ID.
getIdusu: state => state.idusu
const userId = this.$store.getters.getIdusu;
isAuthenticated
Returns true if a user is authenticated (has a valid token), false otherwise.
isAuthenticated: state => !!state.token
if (this.$store.getters.isAuthenticated) {
// User is logged in
}
getFullToken
Returns the complete authorization token string in the format {token_type} {token}.
getFullToken: state => `${state.token_type} ${state.token}`
const authHeader = this.$store.getters.getFullToken;
Mutations
Mutations are synchronous functions that modify the store state. All mutations also persist data to localStorage.
setRol_bio
Sets the user’s role in both state and localStorage.
setRol_bio(state, nuevoRol)
The new role to set (e.g., “sotics”, “atics”, “sa”)
this.$store.commit('setRol_bio', 'sotics');
setemail_bio
Sets the user’s email in both state and localStorage.
setemail_bio(state, nuevoemail)
setid_bio
Sets the user’s ID in both state and localStorage.
setid_bio(state, nuevoid)
setname_bio
Sets the user’s name in both state and localStorage.
setname_bio(state, nuevoname)
setToken_bio
Sets the JWT authentication token in both state and localStorage.
setToken_bio(state, token)
The JWT token received from authentication
this.$store.commit('setToken_bio', response.data.token);
setTokenType_bio
Sets the token type in both state and localStorage.
setTokenType_bio(state, type)
The token type (typically “Bearer”)
logout_bio
Clears all user data from both state and localStorage. This mutation handles complete session cleanup.
Implementation:
logout_bio(state) {
// Limpia el state y localStorage al cerrar sesión
state.role = null;
state.email = null;
state.idusu = null;
state.name = null;
state.token = null;
state.token_type = null;
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');
}
this.$store.commit('logout_bio');
this.$router.push('/');
Complete Example
Here’s a complete example of using the store in a login component:
import store from '@/store';
// After successful login
if (response.data.token) {
store.commit('setRol_bio', response.data.Role);
store.commit('setemail_bio', response.data.email);
store.commit('setname_bio', response.data.name);
store.commit('setToken_bio', response.data.token);
store.commit('setTokenType_bio', response.data.token_type || 'Bearer');
// Navigate to home page
this.$router.push('/home');
}
// Check authentication status
if (this.$store.getters.isAuthenticated) {
console.log('User is logged in');
console.log('User ID:', this.$store.getters.getIdusu);
}
// Logout
this.$store.commit('logout_bio');
Actions and Modules
The current store implementation does not use actions or modules:
All state modifications are performed directly through mutations. Future enhancements could introduce actions for asynchronous operations.