Employ user RememberMe and fix #2

- a checkbox allows users to remember their account in the browser when logging in - issue #2 is resolved by calling an api each time route changes
legendword · Mar 27, 2021 · 636e771 · 636e771
1 parent 6c11eb1
commit 636e771
Show file tree

Hide file tree

Showing 5 changed files with 80 additions and 15 deletions.
diff --git a/quasar.conf.js b/quasar.conf.js
@@ -99,7 +99,8 @@ module.exports = function (/* ctx */) {
 
       // Quasar plugins
       plugins: [
-        'Dialog'
+        'Dialog',
+        'LocalStorage'
       ]
     },
 

diff --git a/src/components/LogIn.vue b/src/components/LogIn.vue
@@ -24,6 +24,7 @@
                 <q-form class="q-gutter-md q-px-md">
                     <q-input v-model="email" lazy-rules :rules="emailRules" :label="$t('general.email')"></q-input>
                     <q-input v-model="password" type="password" lazy-rules :rules="passwordRules" :label="$t('general.password')"></q-input>
+                    <q-checkbox v-model="rememberme" :label="$t('logIn.rememberMe')" />
                     <p><span style="line-height: 36px;padding-right: 5px;">{{ $t('logIn.noAccountPrompt') }}</span> <q-btn :label="$t('logIn.noAccountSignUp')" color="primary" flat @click="toggleSignUp"></q-btn>.</p>
                 </q-form>
             </q-card-section>
@@ -53,6 +54,7 @@ export default {
             signUp: false,
             email: '',
             password: '',
+            rememberme: false,
             emailRules: [
                 val => val && val.length > 0 || this.$t('forms.requiredField')
             ],
@@ -104,7 +106,8 @@ export default {
         submitLogIn() {
             api('signin', {
                 email: this.email,
-                password: this.password
+                password: this.password,
+                rememberme: this.rememberme
             }).then(res => {
                 let r = res.data
                 console.log(r);
@@ -118,9 +121,13 @@ export default {
                 }
                 else if (r.success) {
                     this.$store.commit('userLogIn', r.user)
+                    if (r.identifier && r.token) {
+                        this.$q.localStorage.set('token', r.token)
+                        this.$q.localStorage.set('identifier', r.identifier)
+                    }
                     this.resetFields()
                     this.$emit('closed')
-                    this.$router.go(0)
+                    //this.$router.go(0)
                 }
                 else {
                     this.$q.notify({

diff --git a/src/i18n/en-us/index.js b/src/i18n/en-us/index.js
@@ -174,7 +174,9 @@ export default {
         alreadyAccountSignIn: 'Sign In',
         noAccountPrompt: 'Don\'t have an account?',
         noAccountSignUp: 'Create One',
-        incorrect: 'Email or Password Incorrect'
+        incorrect: 'Email or Password Incorrect',
+        signOutSuccessMsg: 'You are now signed out.',
+        rememberMe: 'Remember Me'
     },
     layoutDrawer: {
         discover: 'Discover',

diff --git a/src/i18n/zh-cn/index.js b/src/i18n/zh-cn/index.js
@@ -174,7 +174,9 @@ export default {
         alreadyAccountSignIn: '登录',
         noAccountPrompt: '没有账号？',
         noAccountSignUp: '注册',
-        incorrect: '邮箱或密码错误'
+        incorrect: '邮箱或密码错误',
+        signOutSuccessMsg: '退出登录成功',
+        rememberMe: '记住我'
     },
     layoutDrawer: {
         discover: '发现',

diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
@@ -114,24 +114,34 @@ export default {
       this.logInDialog = true
     },
     signOut() {
-      api('signout').then(res => {
-        if (res.data.error) {
+      let params = {}
+      if (this.$q.localStorage.has('identifier') && this.$q.localStorage.has('token')) {
+        params = {
+          token: this.$q.localStorage.getItem('token'),
+          identifier: this.$q.localStorage.getItem('identifier')
+        }
+      }
+      api('signout', params).then(res => {
+        let r = res.data
+        if (r.success) {
           this.$q.notify({
-            color: 'negative',
-            message: res.data.msg,
+            color: 'primary',
+            message: this.$t('logIn.signOutSuccessMsg'),
             position: 'top',
             timeout: 2000
           })
+          this.$store.commit('userLogOut')
         }
-        else if (res.data.success) {
+        else {
           this.$q.notify({
-            color: 'primary',
-            message: 'You are now signed out.',
+            color: 'negative',
+            message: r.msg,
             position: 'top',
             timeout: 2000
           })
-          this.$store.commit('userLogOut')
         }
+        this.$q.localStorage.remove('identifier')
+        this.$q.localStorage.remove('token')
       })
     },
     routerGoBack() {
@@ -144,9 +154,48 @@ export default {
       this.miniDrawer = this.miniDrawerMode
     },
     toggleDrawer() {
-      console.log('toggle')
       this.leftDrawer = !this.leftDrawer
     },
+    callAlive() {
+      api('alive').then(res => {
+        let r = res.data
+        console.log(r)
+        if (r.success) {
+          if (!r.isLoggedIn) {
+            //attempt token login if token is stored
+            if (this.$q.localStorage.has('identifier') && this.$q.localStorage.has('token')) {
+              let identifier = this.$q.localStorage.getItem('identifier')
+              let token = this.$q.localStorage.getItem('token')
+              api('signinwithtoken', {
+                identifier,
+                token
+              }).then(res => {
+                let r = res.data
+                console.log('signInWithToken', r)
+                if (r.failed) {
+                  console.log('signInWithToken Failed')
+                  this.$q.localStorage.remove('identifier')
+                  this.$q.localStorage.remove('token')
+                  if (this.isLoggedIn) this.$store.commit('userLogOut')
+                }
+                else if (r.success) {
+                  console.log('signInWithToken Success')
+                  this.$q.localStorage.set('token', r.token)
+                  this.$store.commit('userLogIn', r.user)
+                }
+                else {
+                  console.error(r.msg)
+                  if (this.isLoggedIn) this.$store.commit('userLogOut')
+                }
+              })
+            }
+            else {
+              if (this.isLoggedIn) this.$store.commit('userLogOut')
+            }
+          }
+        }
+      })
+    },
     setData(r) {
       console.log('userinfo', r)
       if (r.error) {}
@@ -156,6 +205,7 @@ export default {
           this.$root.$i18n.locale = r.user.settings.locale
         }
       }
+      this.callAlive()
     }
   },
   watch: {
@@ -173,8 +223,11 @@ export default {
     }).then(res => {
       next(vm => vm.setData(res.data))
     })
+  },
+  beforeRouteUpdate(to, from, next) {
+    this.callAlive()
+    next()
   }
-  //don't need beforeRouteUpdate because userInfo needs only be fetched once
 }
 </script>