add authenticated routes and redirects after login

src/pages/Login.vue

 <template>
-  <q-page
-    padding
-    class="flex justify-center content-center"
-  >
+  <q-page padding class="flex justify-center content-center">
     <!-- content -->
 
     <q-card class="q-pa-md page-row">
@@ -13,15 +10,9 @@
               <div class="text-grey">Please sign in to your account</div>
             </div>
             <div class="col-12 text-center q-pa-md">
-              <q-btn
-                class="bg-grey-5 text-white q-pa-sm full-width"
-                @click="handleGoogle"
-              >
+              <q-btn class="bg-grey-5 text-white q-pa-sm full-width" @click="handleGoogle">
                 Sign in with
-                <q-icon
-                  name="fab fa-google"
-                  class="q-ml-sm"
-                />
+                <q-icon name="fab fa-google" class="q-ml-sm" />
               </q-btn>
             </div>
             <div class="col-12 text-center q-pa-md">
@@ -29,11 +20,7 @@
             </div>
           </div>
           <div class="login-form q-pa-md">
-            <q-form
-              @submit="onSubmit"
-              @reset="onReset"
-              class="q-gutter-md"
-            >
+            <q-form @submit="onSubmit" @reset="onReset" class="q-gutter-md">
               <q-input
                 filled
                 v-model="email"
@@ -58,39 +45,21 @@
               />
 
               <div class="flex justify-start">
-                <q-btn
-                  to="/signup"
-                  label="Sign up"
-                  dense
-                  color="grey-5"
-                  flat
-                />
+                <q-btn to="/signup" label="Sign up" dense color="grey-5" flat />
                 <q-space />
-                <q-btn
-                  label="Sign in"
-                  to="/account/projects"
-                  color="grey-4"
-                />
-                <q-btn
-                  label="Reset"
-                  type="reset"
-                  color="grey-5"
-                  flat
-                  class="q-ml-sm"
-                />
+                <q-btn label="Sign in" to="/account/projects" color="grey-4" />
+                <q-btn label="Reset" type="reset" color="grey-5" flat class="q-ml-sm" />
               </div>
             </q-form>
           </div>
         </div>
         <div class="col-sm-12 col-md-6 q-pa-lg has-decoration">
           <div class="text-center">
-            <q-img
-              src="/statics/600x600fabr.png"
-              basic
-              style="max-width: 200px;"
-            />
+            <q-img src="/statics/600x600fabr.png" basic style="max-width: 200px;" />
             <div class="text-h5">Open-source Circular Fashion</div>
-            <div class="text-display3">A growing collection of open designs, patterns, recipes and zero waste projects.</div>
+            <div
+              class="text-display3"
+            >A growing collection of open designs, patterns, recipes and zero waste projects.</div>
 
             <q-separator class="q-my-md" />
             <div class="text-overline">A project by</div>
@@ -103,26 +72,48 @@
 </template>
 
 <script>
-import { mapActions } from "vuex";
+import { mapActions, mapGetters } from "vuex";
 export default {
   // name: 'PageName',
-  data () {
+  data() {
     return {
       email: "",
       password: ""
     };
   },
+  computed: {
+    ...mapGetters({
+      user: "auth/user"
+    })
+  },
+  watch: {
+    user: function(newVal) {
+      console.log("user changed");
+      if (newVal) {
+        this.$nextTick(() => {
+          this.showAccountPage();
+        });
+      }
+    }
+  },
   methods: {
+    showAccountPage() {
+      if (this.$route.query.redirect) {
+        this.$router.push(this.$route.query.redirect);
+      } else {
+        this.$router.push("/account");
+      }
+    },
     ...mapActions({ signInWithGoogle: "auth/signInWithGoogle" }),
-    onSubmit () { },
-    onReset () { },
-    handleGoogle () {
+    onSubmit() {},
+    onReset() {},
+    handleGoogle() {
       const vm = this;
       this.signInWithGoogle()
         .then(success => {
-          vm.$router.push("/account");
+          vm.showAccountPage();
         })
-        .catch(error => { });
+        .catch(error => {});
     }
   }
 };

src/router/index.js

@@ -25,8 +25,13 @@ export default function({ store } /*, ssrContext } */) {
   Router.beforeEach((to, from, next) => {
     console.log(to);
     console.log(store);
-    if (to.path.startsWith("/account") && !store.getters["auth/user"]) {
-      return next("/login");
+    if (to.matched.some(record => record.meta.requiresAuth)) {
+      if (!store.getters["auth/user"]) {
+        return next({
+          path: "/login",
+          query: { redirect: to.fullPath }
+        });
+      }
     }
     return next();
   });

src/router/routes.js

@@ -25,29 +25,36 @@ const routes = [
             children: [
               {
                 path: "",
+                meta: { requiresAuth: true },
                 component: () => import("pages/UserDashboard")
               },
               {
                 path: "edit",
+                meta: { requiresAuth: true },
                 component: () => import("pages/UserSettings.vue")
               },
               {
                 path: "projects",
+                meta: { requiresAuth: true },
                 component: () => import("pages/UserProjects.vue")
               },
               {
                 path: "collections",
+                meta: { requiresAuth: true },
                 component: () => import("pages/UserCollections.vue")
               },
               {
                 path: "collections/new",
+                meta: { requiresAuth: true },
                 component: () => import("pages/CollectionUpload.vue")
               },
               {
                 path: "bookmarks",
+                meta: { requiresAuth: true },
                 component: () => import("pages/UserBookmarks.vue")
               },
               {
+                meta: { requiresAuth: true },
                 path: "projects/new",
                 component: () => import("pages/ProjectUpload.vue")
               }