es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Redirección basada en el tipo de usuario – enrutador de Vue

01 Aug, 2023 Programación

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,
    }
  },
  ...
Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    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 en main.js. Aquí está el bloque de código actualizado:

    main.js

    router.beforeEach((to, from, next) => {
  const currentUser = firebase.auth().currentUser;
  const requiresAuth = to.meta.requiresAuth;
  const userRole = currentUser && rootGetters['gutscheinStore/getUserRole'];

  if (requiresAuth && !currentUser) {
    // Si el usuario no ha iniciado sesión, redirigir a la página de inicio de sesión
    next({ name: 'Login' });
  } else if (requiresAuth && userRole === 'admin') {
    // Si el usuario ha iniciado sesión y tiene el rol de administrador, redirigir a /admin
    next({ name: 'AdminDashboard' });
  } else if (requiresAuth && userRole !== 'admin') {
    // Si el usuario ha iniciado sesión pero no tiene el rol de administrador, redirigir a /
    next({ name: 'Dashboard' });
  } else {
    next();
  }
});

    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ódulo gutscheinStore. 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 de admin, lo redirigimos al AdminDashboard. Si el usuario ha iniciado sesión pero no tiene el rol de admin, lo redirigimos al Dashboard. 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ódulo gutscheinStore. Esto significa que deberás definir una función getter llamada getUserRole en gutscheinStore.js. Aquí tienes un ejemplo de bloque de código:

    gutscheinStore.js

    const getters = {
  getUserRole: (state) => state.userRole,
};

export default {
  //...
  getters,
};

    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.

Comments are closed.