As I work on my Firebase-VueJS app, I am implementing basic security rules with router guards. In my main.js file, I have added the following code to handle permissions based on the user's authentication status. However, I encounter an error 'vue-router.esm.js?xxx RangeError: Maximum call stack size exceeded':
router.beforeEach( (to, from, next) => {
if(store.getters.getUser == null || store.getters.getUser == undefined ){
next('/welcome',)
}
else return next()
}
);
I also tried using a beforeEnter hook in my router.js file for each path, but despite functioning properly, whenever I refresh the page, it redirects me to the login page ('welcome') even though the user is already logged in. Here is the code snippet:
import store from '../store/index'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'home',
component: Home,
beforeEnter:(to, from, next) => {
if (store.getters.getUser == null || store.getters.getUser == undefined ){
next('/welcome',)
}
else return next()
}
},
path: '/chat',
name: 'chat',
component: Chat,
beforeEnter:(to, from, next) => {
if(store.getters.getUser == null || store.getters.getUser == undefined ){
next('/welcome',)
}
else return next()
}
}...etc...
]