Vuejs 路由器保护 beforeEach 钩子抛出最大调用超出错误

Question

in this firebase -VueJS app i'm building also i'm trying to set basic security rules to surf on it , utilizing router guards. In my main.js i put this code refering to allow permission or not attuning with the user auth situation, but throws me this '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()
    }
);

also as alternative i did try to use a beforeEnter hook on my router.js file on each and every path but despite of being working , any time i reload the page for any reason throws me to the landing login (welcome) page with the user clearly already logged in , here the code :

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...
  ]

Answer 1

guess had to hard code a forced exit to this , but not so conventional or dynamic because only would put me on a specific page , no matter where of the other links by the moment i might be at ... simply kept the beforeEnter in my router.js file , and then in the landing page, for the non authenticated users set a watcher on a opposite condition , pushing straight to home page , but the point is , being on other view aside home page , if i recharge , then would throw me to home page again.... I struggled with the beforeEach for a while , but none of possible solutions on the web was successful . Here what i did:

router.js file


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 next ()
    })
  },
  {
    path: '/about',
    name: 'about',
    component:About,
  },
  {
    path: '/chat',
    name: 'ChatRoom',
    component:ChatRoom,
    beforeEnter:((to, from, next) => {
      if(store.getters.getUser == null || store.getters.getUser == undefined ){
        next ('/welcome',)
      }
        else next()
    })
  },
  {
    path: '/results/:idItemSelected',
    name: 'SearchResults',
    component:SearchResults,
    props:true,
    beforeEnter:((to, from, next) => {
      if(store.getters.getUser == null || store.getters.getUser == undefined ){
        next ('/welcome',)
      }
        else next()
    })

  },
  {
    path: '/welcome',
    name: 'WelcomingPage',
    component:WelcomingPage,

  },
]

and then on my WelcomingPage view set this:

computed: {
    ...mapGetters(["getUser"]),

user(){ 
  return this.$store.getters.getUser

}

watch:{
    user(value) {
      if(value != null||value != undefined){
          this.$router.push('/')
      }
      else{
        return this
      }
    },

This middly works but still isn't completely right , so please if someone has the same issue and already found a practical solution , better than this , i would appreciate any help. Thanks in advance