title: VueJS How to Implement RouterGaurd
body: <p>In a real-world Vue application, the router can easily get to several hundred line long so I split the <code>router.js</code> into separate (component) route files and import them into an <code>index.js</code> However, while doing so, I broke the <code>beforEach</code> function and I cannot figure out how to use the authentication guard with the refactored code. </p>
  
  <p>The below implementation use of <code>beforeEach</code> throws:</p>
  
  <blockquote>
    <p>Uncaught TypeError: routes.beforeEach is not a function</p>
  </blockquote>
  
  <p>Any help with examples would be greatly appreciated!</p>
  
  <p><strong>My Routes index.js:</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>import Vue from 'vue';
  import Router from "vue-router";
  import firebase from 'firebase'
  
  // BASE ROUTES
  import {
    . . .
    aBunch,
    ofRoutes,
    . . .
  } from '@/routers/base'
  
  // INVENTORY ROUTERS
  import {
    . . .
    aBunch,
    more,
    routes,
    . . .
  } from '@/routers/inventory'
  
  Vue.use(Router);
  
  const baseRoute = [
    {
      path: '*',
      redirect: '/login'
    },
    {
      path: '/',
      redirect: '/login'
    },
    {
      path: '/login',
      name: 'login',
      component: load('Login'),
      meta: { transitionName: 'slide' },
    },
    {
      path: '/sign-up',
      name: 'sign up',
      component: load('Signup'),
      meta: { transitionName: 'slide' },
    },
  ]
  
  const routes = baseRoute.concat(
    . . .
    concat,
    aBunch,
    ofRoutes,
    . . .
    );
  
  function load (component) {
    return () =&amp;gt; import(
      /* webpackChunkName: "[request]" */
      `@/views/${component}.vue`
    )
  }
  
  routes.beforeEach((to, from, next) =&amp;gt; {
    let currentUser = firebase.auth().currentUser
    let requiresAuth = to.matched.some(record =&amp;gt; record.meta.requiresAuth)
  
    if (requiresAuth &amp;amp;&amp;amp; !currentUser) next('login')
    else if (!requiresAuth &amp;amp;&amp;amp; currentUser) next('dashboard')
    else next()
  })
  
  export default new Router({
    mode: 'history',
    base: process.env.BASE_URL,
    routes,
  });
  </code></pre>