Redirección basada en el tipo de usuario – enrutador de Vue
Soy principiante en Vue y necesito tu ayuda, por favor. Estoy creando una aplicación donde el inicio de sesión está conectado a Firebase. Me gustaría utilizar vue-router para redirigir al usuario a una página específica. Cuando una persona inicia sesión con “user.role = ‘admin'”, debería redirigirse a “/admin”. Todas las demás personas que inicien sesión serán redirigidas a “/” y las que no hayan iniciado sesión serán redirigidas a la página de “/login”.
Aquí hay partes de mi código:
main.js
router.beforeEach((to, from, next) => {
const currentUser = firebase.auth().currentUser;
const requiresAuth = to.meta.requiresAuth;
if (requiresAuth && !currentUser) {
next({ name: 'Login' });
} else if (!requiresAuth && currentUser) {
next({ name: 'Dashboard' });
console.log(currentUser);
} else {
next();
}
});
authStore.js
const actions = {
logIn({ dispatch,commit,rootGetters }){
firebase.auth().onAuthStateChanged(async (user) => {
if (user) {
commit('SET_USER', user);
var uid = user.uid;
db.collection('users').doc(uid)
.get()
.then((doc) => {
commit('gutscheinStore/SET_USER_ROLE', doc.data().role, { root: true });
commit('gutscheinStore/SET_USER_STANDORT_ID', doc.data().standortID, { root: true });
commit('gutscheinStore/SET_USER_BETREIBER_ID', doc.data().betreiberID, { root: true });
//console.log(rootGetters['gutscheinStore/getUserRole'])
});
router.push('/');
} else {
console.log("No se permite el acceso sin iniciar sesión");
}
});
},
index.js en router
const routes = [
{
path: '/',
name: 'Dashboard',
component: Dashboard,
meta: {
requiresAuth: true,
}
},
{
path: '/login',
name: 'Login',
component: Login
},
{
path: '/admin',
name: 'AdminDashboard',
component: AdminDashboard,
meta: {
requiresAuth: true,
}
},
...
davy.ai
Para redirigir a un usuario a una página particular utilizando vue-router basado en su rol de usuario, deberás modificar la función
router.beforeEach
enmain.js
. Aquí está el bloque de código actualizado:main.js
En este bloque de código actualizado, primero obtenemos el usuario actual y determinamos si la ruta solicitada requiere autenticación. Luego obtenemos el rol del usuario utilizando una función
getUserRole
en el módulogutscheinStore
. Si el usuario no ha iniciado sesión, lo redirigimos a la página de inicio de sesión. Si el usuario ha iniciado sesión y tiene el rol deadmin
, lo redirigimos alAdminDashboard
. Si el usuario ha iniciado sesión pero no tiene el rol deadmin
, lo redirigimos alDashboard
. Si la ruta solicitada no requiere autenticación, simplemente dejamos que el usuario continúe.Observa que estamos utilizando
rootGetters
para obtener el rol de usuario desde el módulogutscheinStore
. Esto significa que deberás definir una función getter llamadagetUserRole
engutscheinStore.js
. Aquí tienes un ejemplo de bloque de código:gutscheinStore.js
Esta función getter simplemente devuelve el rol de usuario actual almacenado en el estado
userRole
.Con estos cambios, tu aplicación ahora debería redirigir a los usuarios en función de su rol de usuario cuando inicien sesión.