resolved critical issues handling expired tokens

Author: McClunatic

src/App.vue

@@ -5,13 +5,21 @@
 </template>
 
 <script>
+import Vue from "vue";
+import interceptor from "./interceptor";
+
 export default {
   created: function() {
-    this.$http.interceptors.response.use(undefined, function(err) {
-      if (err.status === 401 && err.config && !err.config.__isRetryRequest) {
-        this.$store.dispatch("logout");
-      }
-      Promise.reject(err);
+    this.$http.interceptors.response.eject(interceptor);
+    this.$http.interceptors.response.use(undefined, err => {
+      return new Promise((resolve, reject) => {
+        let res = err.response;
+        if (res.status === 200) resolve();
+        if (res.status === 401 && res.config && !res.config.__isRetryRequest) {
+          Vue.nextTick(() => this.$store.dispatch("logout"));
+        }
+        reject(err);
+      });
     });
   }
 };

src/components/Trophies.vue

@@ -183,12 +183,14 @@ export default {
         Vue.set(this.filters, field.key, null);
       }
     });
+    this.fetchTags();
     if (this.$route.query.target) {
       this.collectKills();
     }
   },
   watch: {
     $route: function() {
+      this.fetchTags();
       if (this.$route.query.target) {
         this.collectKills();
       }
@@ -272,6 +274,18 @@ export default {
       let end = this.pickerEnd;
       this.filters[field].start = start ? new Date(start) : null;
       this.filters[field].end = end ? new Date(end) : null;
+    },
+    fetchTags: function() {
+      // handle tag fetches
+      this.$http
+        .get(`${process.env.VUE_APP_API_URL}/profile`)
+        .then(res => {
+          this.$store.dispatch("updateTags", res.data);
+        })
+        .catch(err => {
+          console.log(err);
+          this.$store.dispatch("updateTags", []);
+        });
     }
   }
 };

src/interceptor.js

@@ -0,0 +1,15 @@
+import axios from "axios";
+
+const interceptor = axios.interceptors.response.use(undefined, function(err) {
+  return new Promise(function(resolve, reject) {
+    let res = err.response;
+    if (res.status === 200) resolve();
+    if (res.status === 401 && res.config && !res.config.__isRetryRequest) {
+      localStorage.removeItem("token");
+      delete axios.defaults.headers.common["Authorization"];
+    }
+    reject(err);
+  });
+});
+
+export default interceptor;

src/main.js

@@ -8,6 +8,7 @@ import App from "./App.vue";
 import { createStore } from "./store";
 import router from "./router";
 import axios from "axios";
+import "./interceptor";
 import VueAxios from "vue-axios";
 import { library } from "@fortawesome/fontawesome-svg-core";
 import {

src/store.js

@@ -68,24 +68,22 @@ export function createStore(initialState) {
     },
     actions: {
       login: (context, promise) => {
-        return new Promise((resolve, reject) => {
-          promise
-            .then(res => {
-              localStorage.setItem("token", res.data.token);
-              axios.defaults.headers.common[
-                "Authorization"
-              ] = `Bearer ${res.data.token}`;
-              context.commit("authenticated", {
-                token: res.data.token,
-                user: res.data.user
-              });
-              resolve(res);
-            })
-            .catch(err => {
-              context.commit("denied");
-              reject(err);
+        return promise
+          .then(res => {
+            localStorage.setItem("token", res.data.token);
+            axios.defaults.headers.common[
+              "Authorization"
+            ] = `Bearer ${res.data.token}`;
+            context.commit("authenticated", {
+              token: res.data.token,
+              user: res.data.user
             });
-        });
+            return res;
+          })
+          .catch(err => {
+            context.commit("denied");
+            throw err;
+          });
       },
       register: (context, promise) => {
         return new Promise((resolve, reject) => {

src/views/Search.vue

@@ -17,7 +17,8 @@
           <template v-slot:button-content>
             <em>{{ username }}</em>
           </template>
-          <b-dropdown-item href="#">Profile</b-dropdown-item>
+          <b-dropdown-item v-b-modal.modal-profile>Profile</b-dropdown-item>
+          <profile :username="username"></profile>
           <b-dropdown-item-button @click="logout">
             Sign out
           </b-dropdown-item-button>
@@ -32,12 +33,14 @@
 // @ is an alias to /src
 import Hunter from "@/components/Hunter.vue";
 import Trophies from "@/components/Trophies.vue";
+import Profile from "@/components/Profile.vue";
 
 export default {
   name: "search",
   components: {
     Hunter,
-    Trophies
+    Trophies,
+    Profile
   },
   computed: {
     username: function() {