From e51d0e4d690a043e8daed2b1f1f383282d99d3be Mon Sep 17 00:00:00 2001
From: Fiore Basile <fiore.basile@gmail.com>
Date: Thu, 10 Oct 2019 16:27:04 +0200
Subject: [PATCH] add authenticated routes and redirects after login
---
src/pages/Login.vue | 89 ++++++++++++++++++++------------------------
src/router/index.js | 9 ++++-
src/router/routes.js | 7 ++++
3 files changed, 54 insertions(+), 51 deletions(-)
diff --git a/src/pages/Login.vue b/src/pages/Login.vue
index 62f2c02..dc6c656 100644
--- a/src/pages/Login.vue
+++ b/src/pages/Login.vue
@@ -1,8 +1,5 @@
<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 => {});
}
}
};
diff --git a/src/router/index.js b/src/router/index.js
index 09a3858..cdf1271 100644
--- a/src/router/index.js
+++ b/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();
});
diff --git a/src/router/routes.js b/src/router/routes.js
index b43c055..abb2a49 100644
--- a/src/router/routes.js
+++ b/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")
}
--
GitLab