Vuejs路由器的beforeEach挂钩保护，抛出最大呼叫超出错误数

Question

在此firebase -VueJS应用程序中，我也在构建，我也在尝试设置基本的安全规则，以利用路由器防护对它进行冲浪。在我的main.js中，我将这段代码引用为允许权限或不对用户的身份验证进行调整，但是却向我抛出此“ vue-router.esm.js？xxx RangeError：超出了最大调用堆栈大小”：

router.beforeEach( (to, from, next) => {
      if(store.getters.getUser == null || store.getters.getUser == undefined ){
        next('/welcome',)
      }
        else return  next()
    }
);

另外，我确实尝试在每个路径上的router.js文件上使用beforeEnter钩子，但是尽管可以正常工作，但是由于任何原因，无论何时我重新加载页面，我都会进入登陆登录（欢迎）页面，用户显然已经登录，这里的代码是：

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

猜测必须对强制退出进行硬编码，但不是那么常规或动态，因为无论我何时处于其他链接的任何位置，只会将我放在特定页面上...只需将beforeEnter保留在我的router.js文件中，然后保留在登录页面中，对于未经身份验证的用户，将观察者设置为相反的条件，直接将其推到主页即可，但要点是，在其他视图之外，如果我充电了，那将再次把我带回到主页。我在beforeEach上苦苦挣扎了一段时间，但网络上所有可能的解决方案都没有成功。这是我的工作：

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,

  },
]

然后在我的WelcomingPage视图上设置此：

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

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

}

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

这适中，但仍然不完全正确，因此，如果有人遇到相同的问题并且已经找到了可行的解决方案，比这更好，请提供帮助。在此先感谢