Vue Routing Guard TypeError - PullRequest
Новая
       7

Vue Routing Guard TypeError

1 голос
/ 11 октября 2019

Я пытаюсь защитить домашнюю страницу и направить пользователя на страницу входа, если он / она не вошел в систему.

Для этого я сделал объект маршрутизатора, чтобы использовать функцию beforeEach ().

Но я получаю эту ошибку:

Error Message on console

Эта ошибка возникает после того, как я пытаюсь сделать постоянный объект маршрутизатора.

router.js: 

import Vue from 'vue';
import Router from 'vue-router';
import firebase from 'firebase';
import Home from './views/Home.vue';
import Signup from './components/auth/Signup.vue';
import Login from './components/auth/Login';


Vue.use(Router);


const router = new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home,
      meta: {
        requiresAuth: true,
      },
    },
    {
      path: '/signup',
      name: 'Signup',
      component: Signup,
    },
    {
      path: '/login',
      name: 'Login',
      component: Login,
    },
  ],
});

// router guards
router.beforeEach((to, from, next) => {
  // check to see if routh require auth
  if (to.matched.some(rec => rec.meta.requiresAuth)) {
    // check state of user
    const user = firebase.auth().currentUser;
    if (user) {
      next();
    } else {
      next({ name: 'Login' });
    }
  } else {
    next();
  }
});

Это файл main.js. 

import Vue from 'vue';
import firebase from 'firebase';
import router from './router';
import App from './App.vue';

Vue.config.productionTip = false;

const app = null;
// Wait for firebase init the user
firebase.auth().onAuthStateChanged(() => {
  // init the app if not created
  if (!app) {
    new Vue({
      router,
      render: h => h(App),
    }).$mount('#app');
  }
});

1 Ответ

1 голос
/ 11 октября 2019

Добавьте следующие изменения

Добавьте эту строку до последней в router.js 

export default router;

Добавьте в main.js

import router from './router'; (путь должен указывать наваш router.js) 

new Vue({
   router,
   ....
   ....
})
...