Javascript Vuejs路由器在每个钩子抛出最大调用超出错误之前保护

在我正在构建的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...
  ]

---

guess不得不硬编码一个强制退出，但不是那么传统或动态，因为这只会把我放在一个特定的页面上，不管我可能在的时候其他链接在哪里。。。 只需将beforeEnter保存在我的router.js文件中，然后保存在登录页中，对于未经身份验证的用户，将观察者设置为相反的条件，直接推到主页，但问题是，在主页之外的其他视图中，如果我充电，那么会再次将我推到主页。。。。 我在之前的每一个问题上都挣扎了一段时间，但在网络上没有一个可行的解决方案是成功的。 以下是我所做的：

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
      }
    },

这虽然可以正常工作，但仍然不是完全正确的，所以如果有人有同样的问题，并且已经找到了一个切实可行的解决方案，比这更好，我将感谢任何帮助。

---

提前感谢

尝试

返回下一步（）

，而不只是

下一步（）

；谢谢Prerak，但保持同样的状态…无论如何，谢谢！！！名称为

caht

，b欢迎路线看起来像什么？在您的第一个代码段中，对所有路线（包括

/welcome

路线）执行每个之前的

before。因此，在
getUser
为null的场景中，您将进入一个无限循环。