[FIREBASE-DEMO] Added video 008 code

Author: strobsi

package-lock.json

@@ -11,6 +11,7 @@
     "core-js": "^3.6.5",
     "firebase": "^8.6.8",
     "vue": "^2.6.11",
+    "vue-router": "^3.5.2",
     "vuex": "^3.6.2"
   },
   "devDependencies": {

package.json

@@ -1,40 +1,9 @@
 <template>
   <div id="app">
-    <img alt="Vue logo" src="./assets/logo.png" />
-    <LoginForm @login="login" v-if="!user.uid" msg="Bitte einloggen" /> 
-    <div v-else>
-    Sie sind eingeloggt <button @click="logout()">Logout</button>
-    </div>
+    <router-view></router-view>
   </div>
 </template>
 
-<script>
-import LoginForm from "./components/LoginForm.vue";
-import {mapState} from "vuex";
-
-export default {
-  name: "App",
-  components: {
-    LoginForm,
-  },
-data() {
-   return{}
-  },  
-
-  computed: {
-    ...mapState(["user"])
-  },
-  methods: {
-    login(payload) {
-      this.$store.dispatch("login",payload)
-    },  
-    logout(){
-      this.$store.dispatch("logout");
-    },
-  },
-};
-</script>
-
 <style>
 #app {
   font-family: Avenir, Helvetica, Arial, sans-serif;

src/App.vue

@@ -1,31 +1,30 @@
 import Vue from "vue";
 import App from "./App.vue";
 import store from "./store";
-
+import router from "./router";
 import { auth } from "./firebase";
 
 Vue.config.productionTip = false;
 
 let app;
 
 auth.onAuthStateChanged((user) => {
-  if(!app) {
+  if (!app) {
     app = new Vue({
       store,
+      router,
       render: (h) => h(App),
     }).$mount("#app");
     store.$app = app;
 
-    if(user) {
-     store.dispatch("setAuthState",user);
-    }
-    else {
-      store.dispatch("setAuthState",{});
+    if (user) {
+      store.dispatch("setAuthState", user);
+    } else {
+      store.dispatch("setAuthState", {});
     }
   } else {
     store.$app = app;
     app.$mount("#app");
   }
-  console.log("Auth state changed")
-
-})
+  console.log("Auth state changed");
+});

src/main.js

@@ -0,0 +1,22 @@
+import Vue from "vue";
+import VueRouter from "vue-router";
+import routes from "./routes";
+import { auth } from "../firebase";
+
+Vue.use(VueRouter);
+
+const router = new VueRouter({
+  mode: "history",
+  linkActiveClass: "active",
+  routes,
+});
+
+router.beforeEach((to, from, next) => {
+  const requiresAuth = to.matched.some((x) => x.meta.requiresAuthentication);
+  if (requiresAuth && !auth.currentUser) {
+    next("/");
+  }
+  next();
+});
+
+export default router;

src/router/index.js

@@ -0,0 +1,33 @@
+import Index from "@/views/Index";
+import Dashboard from "@/views/Dashboard";
+
+const routes = [
+  {
+    path: "/",
+    component: Index,
+    meta: {
+      requiresAuthentication: false,
+    },
+    children: [
+      {
+        path: "",
+        component: Index,
+      },
+    ],
+  },
+  {
+    path: "/dashboard",
+    component: Dashboard,
+    meta: {
+      requiresAuthentication: true,
+    },
+    children: [
+      {
+        path: "",
+        component: Dashboard,
+      },
+    ],
+  },
+];
+
+export default routes;

src/router/routes.js

@@ -0,0 +1,27 @@
+<template>
+  <div id="app">
+    <img alt="Vue logo" src="@/assets/logo.png" />
+    Sie sind eingeloggt <button @click="logout()">Logout</button>
+  </div>
+</template>
+
+<script>
+import { mapState } from "vuex";
+export default {
+  name: "Dashboard",
+
+  data() {
+    return {};
+  },
+  computed: {
+    ...mapState(["user"]),
+  },
+  methods: {
+    logout() {
+      this.$store.dispatch("logout").then(() => {
+        this.$router.push("/");
+      });
+    },
+  },
+};
+</script>

src/views/Dashboard.vue

@@ -0,0 +1,33 @@
+<template>
+  <div id="app">
+    <img alt="Vue logo" src="@/assets/logo.png" />
+    <LoginForm @login="login" v-if="!user.uid" msg="Bitte einloggen" />
+  </div>
+</template>
+
+<script>
+import { mapState } from "vuex";
+import LoginForm from "@/components/LoginForm.vue";
+
+export default {
+  name: "Dashboard",
+
+  components: {
+    LoginForm,
+  },
+
+  data() {
+    return {};
+  },
+  computed: {
+    ...mapState(["user"]),
+  },
+  methods: {
+    login(payload) {
+      this.$store.dispatch("login", payload).then(() => {
+        this.$router.push("/dashboard");
+      });
+    },
+  },
+};
+</script>