added token expiry date

Author: oguzhan.onder

package-lock.json

@@ -19,10 +19,10 @@
       return {}
     },
     created() {
-      if (this.$store.state.isLogin == null) {
+      if (this.$store.getters.getIsLogin == null) {
         this.$store.dispatch("initIsLogin");
       }
-      if (this.$store.state.isLogin) {
+      if (this.$store.getters.getIsLogin) {
         this.$store.dispatch("getTradeResult");
         this.$store.dispatch("initApp");
       }

src/App.vue

@@ -1,5 +1,5 @@
 <template>
-  <nav v-if="this.$store.state.isLogin" class="navbar fixed-bottom  navbar-light" style="background-color: #e3f2fd;">
+  <nav v-if="getIsLogin" class="navbar fixed-bottom  navbar-light" style="background-color: #e3f2fd;">
     <span class="navbar-text mr-auto">
         <strong>Vuejs Çalışmaları</strong> | Oğuzhan ÖNDER
     </span>
@@ -23,7 +23,7 @@
 
   export default {
     name: "Footer",
-    computed: mapGetters(["getTradeResult"])
+    computed: mapGetters(["getTradeResult","getIsLogin"])
   }
 </script>
 

src/components/Footer.vue

@@ -1,5 +1,5 @@
 <template>
-  <nav v-if="this.$store.state.isLogin" class="navbar navbar-expand-lg navbar-dark" style="background-color: #563F7A">
+  <nav v-if="getIsLogin" class="navbar navbar-expand-lg navbar-dark" style="background-color: #563F7A">
     <router-link to="/" class="navbar-brand">Ürün Listesi</router-link>
     <div class="collapse navbar-collapse" id="navbarSupportedContent">
       <ul class="navbar-nav mr-auto">
@@ -10,6 +10,7 @@
           <router-link to="/sell" class="nav-link">Ürün Çıkışı</router-link>
         </li>
       </ul>
+
       <ul class="navbar-nav my-2 my-lg-0">
         <li class="nav-item">
           <a href="#" @click="logout" class="nav-link">Çıkış Yap</a>
@@ -20,15 +21,17 @@
 </template>
 
 <script>
+  import {mapGetters} from 'vuex';
+
   export default {
     name: "Header",
     methods:{
       logout(){
-        this.$store.dispatch("logout")
-          .then(res => {
-            this.$router.push("/login");
-          })
+        this.$store.dispatch("logout");
       }
+    },
+    computed:{
+      ...mapGetters(["getIsLogin"]),
     }
   }
 </script>

src/components/Header.vue

@@ -38,13 +38,6 @@
     methods: {
       login() {
         this.$store.dispatch("login", this.loginRequest)
-          .then(res => {
-            if (res) {
-              this.$store.dispatch("getTradeResult");
-              this.$store.dispatch("initApp");
-              this.$router.push("/");
-            }
-          })
       },
     },
   }

src/components/Login.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-if="this.$store.state.isLogin" class="container">
+  <div v-if="getIsLogin" class="container">
     <div class="row">
       <div class="col-12 mb-5 card mt-5 shadow">
         <div class="card-body">
@@ -43,7 +43,7 @@
   export default {
     name: "ProductList",
     computed: {
-      ...mapGetters(["getProductList"]),
+      ...mapGetters(["getProductList","getIsLogin"]),
     },
     methods: {
       getCountClass(count) {

src/components/ProductList.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-if="this.$store.state.isLogin" class="container">
+  <div v-if="getIsLogin" class="container">
     <div class="loading" :style="isLoading">
       <div class="lds-ripple">
         <div></div>
@@ -38,6 +38,7 @@
 
 <script>
   import {productMixin} from '../util/productMixin';
+  import {mapGetters} from 'vuex';
 
   export default {
     name: "ProductPurchase",
@@ -67,6 +68,7 @@
           return true;
         }
       },
+      ...mapGetters(["getIsLogin"]),
     },
     beforeRouteLeave(to, from, next) {
       if ((this.product.title.length > 0 || this.product.description.length > 0 || this.product.price > 0 || this.product.count > 0) && !this.saveButtonClicked) {

src/components/ProductPurchase.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-if="this.$store.state.isLogin" class="container">
+  <div v-if="getIsLogin" class="container">
     <div class="loading" :style="isLoading">
       <div class="lds-ripple">
         <div></div>
@@ -63,7 +63,7 @@
       }
     },
     computed: {
-      ...mapGetters(["getProductList"]),
+      ...mapGetters(["getProductList","getIsLogin"]),
       saveEnabled() {
         if (this.sellCount > 0 && this.selected != null) {
           return false;

src/components/ProductSell.vue

@@ -1,4 +1,5 @@
-import * as util from '../util/util'
+import * as util from '../util/util';
+import router from '../util/router';
 
 export const setTradeResult = ({state, commit}, tradeResult) => {
   util.service.post("trade/createOrUpdate", tradeResult)
@@ -16,7 +17,7 @@ export const getTradeResult = ({commit}) => {
         commit("updateTradeResult", response.data);
       }
     }).catch(error => {
-    util.notify.control(commit, error)
+    util.notify.control(error)
   })
 };
 
@@ -30,7 +31,11 @@ export const login = (vueContext, loginData) => {
       if (response) {
         vueContext.commit("setIsLogin", true);
         localStorage.setItem(util.token, response.data.token);
-        return response;
+        localStorage.setItem(util.expiry, response.data.expirationDate);
+        vueContext.dispatch("setTimeOutTimerExpiry", response.data.expirationDate);
+        vueContext.dispatch("initApp");
+        vueContext.dispatch("getTradeResult");
+        router.push("/");
       }
     }).catch(error => {
       loginData.password = null;
@@ -44,10 +49,12 @@ export const logout = (vueContext) => {
       if (res) {
         vueContext.commit("setIsLogin", false);
         localStorage.removeItem(util.token);
-        return res;
+        localStorage.removeItem(util.expiry);
+        router.push("/login");
       }
+    }).catch(err=>{
+      util.notify.control(err);
     });
-
 };
 
 export const userRegister = (vueContext, registerData) => {
@@ -56,15 +63,32 @@ export const userRegister = (vueContext, registerData) => {
       if (response) {
         return response;
       }
-    }).catch(error=>{
+    }).catch(error => {
       registerData = {};
     })
 };
 
+export const setTimeOutTimerExpiry = (vueContext, expiry) => {
+  setTimeout(() => {
+    vueContext.dispatch("logout");
+  }, expiry);
+}
+
 export const initIsLogin = (vueContext) => {
+  let obj= {};
+  obj.status = 401;
   if (localStorage.getItem(util.token)) {
-    vueContext.commit("setIsLogin", true)
+    let now = new Date().getTime();
+    let expiry = localStorage.getItem(util.expiry);
+    if (now >= expiry) {
+     util.notify.control(obj);
+    } else {
+      let timer = expiry - now;
+      vueContext.commit("setIsLogin", true);
+      vueContext.dispatch("setTimeOutTimerExpiry", timer)
+    }
   } else {
-    vueContext.commit("setIsLogin", false)
+    util.notify.control(obj);
   }
 };
+

src/store/actions.js

@@ -5,3 +5,7 @@ export const getTradeResult = (state) => {
    balance : state.balance
  }
 };
+
+export const getIsLogin = (state) =>{
+  return state.isLogin;
+}