Merge pull request #376 from Seluj78/373-refresh-token

Author: Seluj78

frontend/src/auth/logOut.js

@@ -1,7 +1,7 @@
 /* eslint-disable max-len */
 import jwtDecode from 'jwt-decode';
 import Axios from 'axios';
-import { logOut } from './logOut';
+import router from '@/router';
 
 export const setAccessToken = (token) => (localStorage.setItem(process.env.VUE_APP_ACCESS_TOKEN, token));
 export const setRefreshToken = (token) => (localStorage.setItem(process.env.VUE_APP_REFRESH_TOKEN, token));
@@ -24,7 +24,7 @@ export const renewAccessToken = async () => {
       const response = await Axios.post('/auth/refresh', {});
       localStorage.setItem('matchaAccessToken', response.data.access_token);
     } catch (error) {
-      await logOut();
+      await router.push('/accounts/signout');
     }
   }
 };

frontend/src/auth/tokens.js

@@ -54,6 +54,9 @@ export default {
     this.slider.min = this.min;
     this.slider.max = this.max;
     this.slider.start = this.min;
+    if (this.slider.min === this.slider.max) {
+      this.slider.max += 1;
+    }
     noUiSlider.create(this.$refs.slider, {
       start: [this.slider.startMin, this.slider.startMax],
       step: this.slider.step,

frontend/src/components/shared/FilterSliderDropdown.vue

@@ -30,14 +30,13 @@
       <router-link v-if="loggedIn" to="/matches" v-bind:class="{'navigation-button-logged-in': true, 'font-black': currentRoute === 'Matches'}">Matches</router-link>
       <router-link v-if="loggedIn" to="/settings" v-bind:class="{'navigation-button-logged-in': true, 'font-black': currentRoute === 'Settings'}">Settings</router-link>
       <router-link v-if="loggedIn" to="/history" v-bind:class="{'navigation-button-logged-in': true, 'font-black': currentRoute === 'History'}">History</router-link>
-      <router-link v-if="loggedIn" v-on:click.native="logout()" to="/" class="navigation-button-logged-in">Exit</router-link>
+      <router-link v-if="loggedIn" to="/accounts/signout" class="navigation-button-logged-in">Exit</router-link>
     </div>
   </nav>
 </template>
 
 <script>
 /* eslint-disable indent */
-import { logOut } from '@/auth/logOut';
 
 export default {
   name: 'Navigation',
@@ -52,10 +51,5 @@ export default {
       return this.$store.getters.getLoggedInUser;
     },
   },
-  methods: {
-    async logout() {
-      await logOut();
-    },
-  },
 };
 </script>

frontend/src/components/shared/NavBar.vue

@@ -15,6 +15,7 @@ import Settings from '../views/app/Settings.vue';
 import User from '../components/app/users/User.vue';
 import History from '../views/app/History.vue';
 import Matches from '../views/app/Matches.vue';
+import SignOut from '../views/auth/SignOut.vue';
 import store from '../store/index';
 
 Vue.use(VueRouter);
@@ -132,6 +133,11 @@ const routes = [
     component: Matches,
     beforeEnter: notLoggedInRedirectLogin,
   },
+  {
+    path: '/accounts/signout',
+    component: SignOut,
+    beforeEnter: notLoggedInRedirectLogin,
+  },
 ];
 
 const router = new VueRouter({

frontend/src/router/index.js

@@ -0,0 +1,22 @@
+<template>
+  <div>signing out...</div>
+</template>
+
+<script>
+
+export default {
+  name: 'SignOut',
+  async mounted() {
+    await this.$http.post('/auth/logout', {
+      access_token: localStorage.getItem(process.env.VUE_APP_ACCESS_TOKEN),
+      refresh_token: localStorage.getItem(process.env.VUE_APP_REFRESH_TOKEN),
+    });
+    localStorage.removeItem(process.env.VUE_APP_ACCESS_TOKEN);
+    localStorage.removeItem(process.env.VUE_APP_REFRESH_TOKEN);
+    localStorage.removeItem(process.env.VUE_APP_VUEX_PERSISTED_STATE);
+    localStorage.removeItem(process.env.VUE_APP_SECURE_LS_METADATA);
+    await this.$store.dispatch('logout');
+    window.location.reload();
+  },
+};
+</script>