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

Question

在我正在构建的这个 firebase -VueJS 应用程序中，我还尝试设置基本的安全规则以利用路由器防护在其上冲浪。 在我的 main.js 中，我将这段代码指的是允许权限或不调整用户身份验证情况，但向我抛出了这个“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()
    }
);

也作为替代，我确实尝试在每个路径上的 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,

  },
]

然后在我的 WelcomePage 视图上设置：

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

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

}

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

这中间有效，但仍然不完全正确，所以如果有人遇到同样的问题并且已经找到了比这更好的实用解决方案，我将不胜感激。 提前致谢