Vue Routing Guard TypeError

Viewed 42

I am trying to guard home page and route user to login page if he/she is not signed in.

To do that I made I made router object so that I can use beforeEach() function.

But I get this error:

Error Message on console

This error occurs after I try to make a constant object of router.

router.js is:

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();
  }
});

This is is in main.js file.

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 Answers

Add the below changes

Add this line to last in router.js

export default router;

Add In main.js

import router from './router'; (path should point to your router.js)

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