Update ereaders to handle refreshing, epubjs to use custom request method, separate accessToken in store

client/components/modals/AccountModal.vue

@@ -311,7 +311,7 @@ export default {
 
             if (data.user.id === this.user.id && data.user.accessToken !== this.user.accessToken) {
               console.log('Current user access token was updated')
-              this.$store.commit('user/setUserToken', data.user.accessToken)
+              this.$store.commit('user/setAccessToken', data.user.accessToken)
             }
 
             this.$toast.success(this.$strings.ToastAccountUpdateSuccess)

client/components/readers/ComicReader.vue

@@ -104,9 +104,6 @@ export default {
     }
   },
   computed: {
-    userToken() {
-      return this.$store.getters['user/getToken']
-    },
     libraryItemId() {
       return this.libraryItem?.id
     },
@@ -234,10 +231,7 @@ export default {
     async extract() {
       this.loading = true
       var buff = await this.$axios.$get(this.ebookUrl, {
-        responseType: 'blob',
-        headers: {
-          Authorization: `Bearer ${this.userToken}`
-        }
+        responseType: 'blob'
       })
       const archive = await Archive.open(buff)
       const originalFilesObject = await archive.getFilesObject()

client/components/readers/EpubReader.vue

@@ -57,9 +57,6 @@ export default {
     }
   },
   computed: {
-    userToken() {
-      return this.$store.getters['user/getToken']
-    },
     /** @returns {string} */
     libraryItemId() {
       return this.libraryItem?.id

client/components/readers/MobiReader.vue

@@ -26,9 +26,6 @@ export default {
     return {}
   },
   computed: {
-    userToken() {
-      return this.$store.getters['user/getToken']
-    },
     libraryItemId() {
       return this.libraryItem?.id
     },
@@ -96,11 +93,8 @@ export default {
     },
     async initMobi() {
       // Fetch mobi file as blob
-      var buff = await this.$axios.$get(this.ebookUrl, {
-        responseType: 'blob',
-        headers: {
-          Authorization: `Bearer ${this.userToken}`
-        }
+      const buff = await this.$axios.$get(this.ebookUrl, {
+        responseType: 'blob'
       })
       var reader = new FileReader()
       reader.onload = async (event) => {

client/components/readers/PdfReader.vue

@@ -55,7 +55,8 @@ export default {
       loadedRatio: 0,
       page: 1,
       numPages: 0,
-      pdfDocInitParams: null
+      pdfDocInitParams: null,
+      isRefreshing: false
     }
   },
   computed: {
@@ -152,7 +153,34 @@ export default {
       this.page++
       this.updateProgress()
     },
-    error(err) {
+    async refreshToken() {
+      if (this.isRefreshing) return
+      this.isRefreshing = true
+      const newAccessToken = await this.$store.dispatch('user/refreshToken').catch((error) => {
+        console.error('Failed to refresh token', error)
+        return null
+      })
+      if (!newAccessToken) {
+        // Redirect to login on failed refresh
+        this.$router.push('/login')
+        return
+      }
+
+      // Force Vue to re-render the PDF component by creating a new object
+      this.pdfDocInitParams = {
+        url: this.ebookUrl,
+        httpHeaders: {
+          Authorization: `Bearer ${newAccessToken}`
+        }
+      }
+      this.isRefreshing = false
+    },
+    async error(err) {
+      if (err && err.status === 401) {
+        console.log('Received 401 error, refreshing token')
+        await this.refreshToken()
+        return
+      }
       console.error(err)
     },
     resize() {