Многократные перенаправления маршрутизатора Vue.js в адресной строке - PullRequest
Новая
       9

Многократные перенаправления маршрутизатора Vue.js в адресной строке

0 голосов
/ 04 ноября 2018

Я только что построил проект, используя Vue.js. Все отлично работает, но есть проблема.
Когда я подключаю пользователя к приложению, он перенаправляется на /, и заголовок становится http://localhost:8080/#/?redirect=%2Flogin, что, наверное, нормально.

Если я сейчас выйду из системы (что перемещает пользователя на /login, адресная строка будет:
http://localhost:8080/#/login?redirect=%2F%3Fredirect%3D%252Flogin

Это мой router.js файл: 

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
import Login from './views/Login.vue'
import Register from './views/Register.vue'
import firebase from 'firebase'

Vue.use(Router)

const router = new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home,
      meta: {
        requiresAuth: true
      }
    },
    {
      path: '/about',
      name: 'about',
      // route level code-splitting
      // this generates a separate chunk (about.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
    },
    {
      path: '/login',
      name: 'login',
      component: Login,
      meta: {
        requiresGuest: true
      }
    },
    {
      path: '/register',
      name: 'register',
      component: Register,
      meta: {
        requiresGuest: true
      }
    }
  ]
})

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    firebase.auth().onAuthStateChanged((user) => {
      if (!user) {
        next({
          path: '/login',
          query: {
            redirect: to.fullPath
          }
        })
      } else {
          next();
      }
      });
  }
  else if (to.matched.some(record => record.meta.requiresGuest)) {
    firebase.auth().onAuthStateChanged((user) => {
      if (user) {
        next({
          path: '/',
          query: {
            redirect: to.fullPath
          }
        })
      } else {
          next();
      }
      });
  }
  else {
    next();
  }
});

export default router;
...