Route guards

src/router/index.js

@@ -1,15 +1,19 @@
 import Vue from "vue";
 import VueRouter from "vue-router";
-import Home from "../views/Home.vue";
+import RoomsView from "../views/RoomsView.vue";
 import AuthView from "../views/AuthView.vue";
+import store from "../store";
 
 Vue.use(VueRouter);
 
 const routes = [
   {
     path: "/",
     name: "Home",
-    component: Home
+    component: RoomsView,
+    meta: {
+      requiresAuth: true
+    }
   },
   {
     path: "/auth",
@@ -24,4 +28,19 @@ const router = new VueRouter({
   routes
 });
 
+router.beforeEach(async (to, from, next) => {
+  const requiresAuth = to.matched.some(record => record.meta.requiresAuth);
+
+  // Requires auth & no user
+  if (requiresAuth && !(await store.dispatch("user/getCurrentUser"))) {
+    next({ name: "auth" });
+    // No requires auth and user (auth)
+  } else if (!requiresAuth && (await store.dispatch("user/getCurrentUser"))) {
+    next({ name: "Home" });
+  } else {
+    // Anything else
+    next();
+  }
+});
+
 export default router;

src/store/user.js

@@ -12,6 +12,19 @@ const mutations = {
 };
 
 const actions = {
+  getCurrentUser() {
+    return new Promise((resolve, reject) => {
+      const unsubscribe = auth.onAuthStateChanged(
+        user => {
+          unsubscribe();
+          resolve(user);
+        },
+        () => {
+          reject();
+        }
+      );
+    });
+  },
   async doLogin({ commit }, { email, password }) {
     await auth.signInWithEmailAndPassword(email, password);
     commit("setUser", auth.currentUser);

src/views/Home.vue → src/views/RoomsView.vue

@@ -17,7 +17,7 @@
 <script>
 import { fb, auth } from "../firebase";
 export default {
-  name: "Home",
+  name: "RoomsView",
   data() {
     return {
       user: null