auto logout complete

JohnLing73 · Sep 30, 2021 · 6930a2f · 6930a2f
1 parent 8741f8b
commit 6930a2f
Showing 6 changed files with 73 additions and 11 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -17,10 +17,25 @@ export default {
       spinning: false,
     };
   },
+  computed: {
+    didAutoLogout() {
+      return this.$store.getters.didAutoLogout;
+    }
+  },
   methods: {
     toggleList() {
       this.$store.commit('toggleList',false);
     }
+  },
+  created() {
+    this.$store.dispatch('autoLogin');
+  },
+  watch: {
+    didAutoLogout(newVal, oldVal) {
+      if(newVal && newVal !== oldVal) {
+        this.$router.replace('/home');
+      }
+    }
   }
 };
 </script>

diff --git a/src/pages/member/NewMemberPage.vue b/src/pages/member/NewMemberPage.vue
@@ -65,7 +65,9 @@ export default {
   },
   watch: {
     $route(newRoute) {
-      this.breadCrumb =  this.crumbCreator(newRoute);
+      if(this.memId) {
+        this.breadCrumb =  this.crumbCreator(newRoute);
+      }
     }
   }
 };

diff --git a/src/store/modules/auth/actions.js b/src/store/modules/auth/actions.js
@@ -1,3 +1,5 @@
+let timer;
+
 import axios from "axios"
 
 export default { 
@@ -46,27 +48,53 @@ export default {
         password: payload.password,
         returnSecureToken: true
       });
+      // const expiresIn = +response.data.expiresIn*1000;
+      const expiresIn = 5000;
+      const expirationDate = new Date().getTime() + expiresIn;
+      localStorage.setItem('token', response.data.idToken);
+      localStorage.setItem('userId', response.data.localId);
+      localStorage.setItem('tokenExpiration', expirationDate);// 等等autologin會用來偵測
+
+      timer = setTimeout(function() {
+        context.dispatch('autoLogout')
+      }, expiresIn);
+
       context.commit('setUser', {
         token: response.data.idToken,
         userId: response.data.localId,
-        tokenExpiration: response.data.expiresIn
       });
       if(response.status !== 200) {
         return;
       }
       await context.dispatch('loginGet');
-    // }catch(error) {
-      // console.log(error.message);
-      // throw error;
-    // }
+  },
+  autoLogin(context) {
+    const token = localStorage.getItem('token');
+    const userId = localStorage.getItem('userId');
+    const tokenExpiration = localStorage.getItem('tokenExpiration');
+
+    const expiresIn = +tokenExpiration - new Date().getTime();
+
+    if(expiresIn < 0) {
+      return;
+    }
+
+    timer = setTimeout(function() {
+      context.dispatch('autoLogout');
+    },expiresIn);
+
+    if(token && userId) {
+      context.commit('setUser',{
+        token: token,
+        userId: userId,
+      });
+      context.dispatch('loginGet');
+    }
   },
   async loginGet(context) { // 登入成功便抓取資料ˋ
       const userId = context.rootGetters.userId;
       const token = context.getters.token;
       const response = await axios.get(`https://resume-store-fd4de-default-rtdb.firebaseio.com/users/${userId}.json?auth=` + token);
-      console.log(response);
-      console.log('cart:',response.data.cart);
-      console.log('wishlist:',response.data.wishlist);
       if(response.data.cart && response.data.wishlist) {
         context.commit('userInfo', {
           memId: response.data.memberId,
@@ -135,6 +163,12 @@ export default {
     console.log(response);
   },
   logout(context) {
+    localStorage.removeItem('token');
+    localStorage.removeItem('userId');
+    localStorage.removeItem('tokenExpiration');
+
+    clearTimeout(timer);
+
     context.commit('setUser', {
       token: null,
       userId: null,
@@ -148,5 +182,9 @@ export default {
       memCart: [],
       memWishlist: []
     })
+  },
+  autoLogout(context) {
+    context.dispatch('logout');
+    context.commit('setAutoLogout');
   }
 }
diff --git a/src/store/modules/auth/getters.js b/src/store/modules/auth/getters.js
@@ -8,6 +8,9 @@ export default {
   isAuthenticated(state) {
     return !!state.token;
   },
+  didAutoLogout(state) {
+    return state.didAutoLogout;
+  },
   memId(state) {
     return state.memId;
   },

diff --git a/src/store/modules/auth/index.js b/src/store/modules/auth/index.js
@@ -7,7 +7,8 @@ export default {
     return {
       userId: null, //firebase automatically created
       token: null,
-      tokenExpiration: null,
+
+      didAutoLogout: false,
 
       memId: '', // user setting
       memBirth: '',

diff --git a/src/store/modules/auth/mutations.js b/src/store/modules/auth/mutations.js
@@ -2,7 +2,7 @@ export default {
   setUser(state, payload) {
     state.token = payload.token;
     state.userId = payload.userId;
-    state.tokenExpiration = payload.tokenExpiration;
+    state.didAutoLogout = false;
   },
   userInfo(state,payload) {
     state.memId = payload.memId;
@@ -47,5 +47,8 @@ export default {
   },
   mutateWishlist(state, payload) {
     state.memWishlist.splice(payload, 1);
+  },
+  setAutoLogout(state) {
+    state.didAutoLogout = true;
   }
 }