Automatically refresh jwt token periodically

Signed-off-by: Thomas Citharel <tcit@tcit.fr>

js/src/App.vue

@@ -50,6 +50,8 @@ import { initializeCurrentActor } from "./utils/auth";
 import { CONFIG } from "./graphql/config";
 import { IConfig } from "./types/config.model";
 import { ICurrentUser } from "./types/current-user.model";
+import jwt_decode, { JwtPayload } from "jwt-decode";
+import { refreshAccessToken } from "./apollo/utils";
 
 @Component({
   apollo: {
@@ -78,6 +80,8 @@ export default class App extends Vue {
 
   online = true;
 
+  interval: number | undefined = undefined;
+
   async created(): Promise<void> {
     if (await this.initializeCurrentUser()) {
       await initializeCurrentActor(this.$apollo.provider.defaultClient);
@@ -119,11 +123,29 @@ export default class App extends Vue {
       this.online = true;
       console.log("online");
     });
+
+    this.interval = setInterval(async () => {
+      const accessToken = localStorage.getItem(AUTH_ACCESS_TOKEN);
+      if (accessToken) {
+        const token = jwt_decode<JwtPayload>(accessToken);
+        if (
+          token?.exp !== undefined &&
+          new Date(token.exp * 1000 - 60000) < new Date()
+        ) {
+          refreshAccessToken(this.$apollo.getClient());
+        }
+      }
+    }, 60000);
   }
 
   showOfflineNetworkWarning(): void {
     this.$notifier.error(this.$t("You are offline") as string);
   }
+
+  unmounted(): void {
+    clearInterval(this.interval);
+    this.interval = undefined;
+  }
 }
 </script>