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

這中間有效，但仍然不完全正確，所以如果有人遇到同樣的問題並且已經找到了比這更好的實用解決方案，我將不勝感激。 提前致謝