Vue.js Перенаправляется при переходе с на через навигационный щиток

#javascript #vue.js

#javascript #vue.js

Вопрос:

У меня есть защищенный маршрут, к которому пользователь получает доступ после входа в систему. Что я хочу сделать, так это перенаправить его на домашнюю страницу, как только он нажмет на div, в настоящее время это не работает, потому что я получаю эти две ошибки:

 Error: Redirected when going from "/captables" to "/home" via a navigation guard.
  
 RangeError: Maximum call stack size exceeded
  

Что я делаю не так, чтобы вызвать эти ошибки, и как я могу их исправить?

Вот мой index.js:

 import firebase from "firebase/app";
import "firebase/auth";
                                                
import Multibaas from '../components/MultibaasExample.vue'
Vue.use(Router)

const router =  new Router({
  routes: [
    {
      path: '/',
      name: 'Login',
      component: Login
    },
    {
      path: '/home',
      name: 'Home',
      component: Home
    },
    {
      path: '/unauthorized',
      name: 'Unauthorized',
      component: Unauthorized
    },
    {
      path: '*',
      component: NotFound,
      name: 'NotFound',
    },
    {
      path: '/multibaas',
      name: 'Multibaas',
      component: Multibaas
    },
    {
      path: '/captables',
      name: 'CapTables',
      component: CapTables,
      meta: {
        requiresAuth: true
      },
    },
  ],
  mode: 'history'
})

router.beforeEach((to, from, next) => {
 const currentUser = firebase.auth().currentUser
 const requiresAuth = to.matched.some(record => record.meta.requiresAuth)

 if(requiresAuth amp;amp; !currentUser) next('/')
   else if (!requiresAuth amp;amp; currentUser) next('home')
   else next()
});

export default router
  

Я попытался изменить следующий на router push , но это мало что дало.

и вот мой html:

       <md-button class="view-captable-btn" v-for="item in capTables" :key="item.contractAddress" 
        @click="navigateAway"> 
        <p>{{item.label}}</p>
        <p class="contract-address-p"> {{item.contractAddress}}</p>
       </md-button>
  

и моя функция перенаправления:

 navigateAway() {
        this.$router.push('/home')
      }
  

Вот console.log стек:

 Error: Redirected when going from "/captables" to "/home" via a navigation guard.
    at createRouterError (vue-router.esm.js?8c4f:2008)
    at createNavigationRedirectedError (vue-router.esm.js?8c4f:1967)
    at eval (vue-router.esm.js?8c4f:2314)
    at eval (index.js?a18c:58)
    at iterator (vue-router.esm.js?8c4f:2300)
    at step (vue-router.esm.js?8c4f:1947)
    at step (vue-router.esm.js?8c4f:1951)
    at runQueue (vue-router.esm.js?8c4f:1955)
    at HTML5History.confirmTransition (vue-router.esm.js?8c4f:2330)
    at HTML5History.transitionTo (vue-router.esm.js?8c4f:2203)
  

Комментарии:

1. Поместите свой * маршрут последним. См. router.vuejs.org/guide/essentials /…

2. Я только что сделал это, и я все еще получаю те же ошибки

3. Можете ли вы создать пример stackbiltz

4. Я обновил свой вопрос с помощью консоли. результат журнала

5. Попробуйте добавить / (косую home черту) перед вызовом next -> else if (!requiresAuth amp;amp; currentUser) next('/home')