I am a beginner in vue and I need your help please. I am creating an application where the login is connected to firebase. I would like to use vue-router to redirect a user to a particular page. When a person logs in whose user.role = "admin" it should be redirected to "/admin". Every other logged person to "/" and non-logged in people are redirected to "/login" page. Here are parts of my code:
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 entry without login")
}
})
},
index.js in 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,
}
In authStore.js where you currently have the line router.push("/"):
const actions = {
...
// snipped for clarity
router.push('/')
} else {
console.log("No entry without login")
}
})
},
You could instead change this as follows:
const actions = {
...
// snipped for clarity
if(user.role === "admin") {
router.push("/admin")
} else {
router.push("/")
}
} else {
// router.push("/login")
router.go()
}
})
},