router.js

router.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import firebase from 'firebase'
import {Message} from 'element-ui'
import signIn from './sign-in.vue'

Vue.use(VueRouter);

var routes = {
  root: {
    path: '/',
    template: '<div>Main</div>'

  },
  signIn: {
    path: '/sign-in',
    component: signIn
  },
  signOut: {
    path: '/sign-out',
    component: {
      template: '<div>sign-out</div>',
      mounted: function () {
        firebase.auth().signOut().then(
          () => {
            this.$message("Sign out! : " + firebase.auth().currentUser);
            router.push("/sign-in");
          },
          (e) => {
            this.$message.error(e.code + " : " + e.message);
          }
        )
      }
    }
  },
  tasks: {
    path: '/tasks',
    component: {
      template: '<div>Task</div>'
    }
  },
  chats: {
    path: '/chats',
    component: {
      template: '<div>Chat</div>'
    }
  }
}, routesArray = [];

for (var index in routes) {
  routesArray.push(routes[index]);
}

const router = new VueRouter({routes: routesArray});

router.beforeEach((to, from, next) => {
  // if a non-logged-in user navigates to another page, it must be redirected to the login page
  if (firebase.auth().currentUser == null && to.path.toLowerCase() != routes.signIn.path) {
    next(routes.signIn.path);
    Message.error("please sign in")
  } else {
    next();
  }
});

export {router, routes, routesArray}