VueJS How to Implement RouterGaurd

Question

In a real-world Vue application, the router can easily get to several hundred line long so I split the router.js into separate (component) route files and import them into an index.js However, while doing so, I broke the beforEach function and I cannot figure out how to use the authentication guard with the refactored code.

The below implementation use of beforeEach throws:

Uncaught TypeError: routes.beforeEach is not a function

Any help with examples would be greatly appreciated!

My Routes index.js:

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 () => import(
    /* webpackChunkName: "[request]" */
    `@/views/${component}.vue`
  )
}

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

  if (requiresAuth && !currentUser) next('login')
  else if (!requiresAuth && currentUser) next('dashboard')
  else next()
})

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes,
});

Answer 1

beforeEach is on router.

let router =  new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes,
});

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

  if (requiresAuth && !currentUser) next('login');
  else if (!requiresAuth && currentUser) next('dashboard');
  else next();
});

export default router;

if you also wanted to put beforeEach in its own file, you could import the router you construct into another file and call it there

import Router from "@/router";

export default () => {
  Router.beforeEach( ... );
}