Update readers to handle token refresh

components/readers/ComicReader.vue

@@ -77,9 +77,6 @@ export default {
     }
   },
   computed: {
-    userToken() {
-      return this.$store.getters['user/getToken']
-    },
     libraryItemId() {
       return this.libraryItem?.id
     },
@@ -247,10 +244,7 @@ export default {
 
       // TODO: Handle JWT auth refresh
       const buff = await this.$axios.$get(this.url, {
-        responseType: 'blob',
-        headers: {
-          Authorization: `Bearer ${this.userToken}`
-        }
+        responseType: 'blob'
       })
 
       const archive = await Archive.open(buff)

components/readers/EpubReader.vue

@@ -49,9 +49,6 @@ export default {
     }
   },
   computed: {
-    userToken() {
-      return this.$store.getters['user/getToken']
-    },
     /** @returns {string} */
     libraryItemId() {
       return this.libraryItem?.id
@@ -298,15 +295,26 @@ export default {
 
       /** @type {EpubReader} */
       const reader = this
+
+      // Use axios to make request because we have token refresh logic in interceptor
+      const customRequest = async (url) => {
+        try {
+          return this.$axios.$get(url, {
+            responseType: 'arraybuffer'
+          })
+        } catch (error) {
+          console.error('EpubReader.initEpub customRequest failed:', error)
+          throw error
+        }
+      }
+
       console.log('[EpubReader] initEpub', reader.url)
       /** @type {ePub.Book} */
       reader.book = new ePub(reader.url, {
         width: window.innerWidth,
         height: window.innerHeight - this.readerHeightOffset,
         openAs: 'epub',
-        requestHeaders: {
-          Authorization: `Bearer ${this.userToken}`
-        }
+        requestMethod: this.isLocal ? null : customRequest
       })
 
       /** @type {ePub.Rendition} */

components/readers/MobiReader.vue

@@ -22,11 +22,7 @@ export default {
   data() {
     return {}
   },
-  computed: {
-    userToken() {
-      return this.$store.getters['user/getToken']
-    }
-  },
+  computed: {},
   methods: {
     addHtmlCss() {
       let iframe = document.getElementsByTagName('iframe')[0]
@@ -86,10 +82,7 @@ export default {
       // Fetch mobi file as blob
       // TODO: Handle JWT auth refresh
       var buff = await this.$axios.$get(this.url, {
-        responseType: 'blob',
-        headers: {
-          Authorization: `Bearer ${this.userToken}`
-        }
+        responseType: 'blob'
       })
       var reader = new FileReader()
       reader.onload = async (event) => {
@@ -134,4 +127,4 @@ export default {
   overflow-x: hidden;
   overflow-y: auto;
 }
-</style>
+</style>

components/readers/PdfReader.vue

@@ -49,7 +49,8 @@ export default {
       numPages: 0,
       windowWidth: 0,
       windowHeight: 0,
-      pdfDocInitParams: null
+      pdfDocInitParams: null,
+      isRefreshing: false
     }
   },
   computed: {
@@ -109,6 +110,10 @@ export default {
     },
     isPlayerOpen() {
       return this.$store.getters['getIsPlayerOpen']
+    },
+    ebookUrl() {
+      const serverAddress = this.$store.getters['user/getServerAddress']
+      return this.isLocal ? this.url : `${serverAddress}${this.url}`
     }
   },
   methods: {
@@ -164,7 +169,54 @@ export default {
       this.page++
       this.updateProgress()
     },
-    error(err) {
+    async handleRefreshFailure() {
+      try {
+        console.log('[PdfReader] Handling refresh failure - logging out user')
+
+        // Clear store
+        await this.$store.dispatch('user/logout')
+
+        if (this.$store.getters['user/getServerConnectionConfigId']) {
+          // Clear refresh token for server connection config
+          await this.$db.clearRefreshToken(this.$store.getters['user/getServerConnectionConfigId'])
+        }
+
+        if (window.location.pathname !== '/connect') {
+          window.location.href = '/connect'
+        }
+      } catch (error) {
+        console.error('[PdfReader] Failed to handle refresh failure:', error)
+      }
+    },
+    async refreshToken() {
+      if (this.isRefreshing) return
+      this.isRefreshing = true
+      // Cannot use axios with this pdf reader so we need to handle the refresh separately
+      // Should work on migrating to a different pdf reader in the future
+      const newAccessToken = await this.$store.dispatch('user/refreshToken').catch((error) => {
+        console.error('Failed to refresh token', error)
+        return null
+      })
+      if (!newAccessToken) {
+        this.handleRefreshFailure()
+        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)
     },
     screenOrientationChange() {
@@ -173,7 +225,7 @@ export default {
     },
     init() {
       this.pdfDocInitParams = {
-        url: this.url,
+        url: this.ebookUrl,
         httpHeaders: {
           Authorization: `Bearer ${this.userToken}`
         }

components/readers/Reader.vue

@@ -305,11 +305,11 @@ export default {
       if (this.localContentUrl) {
         return Capacitor.convertFileSrc(this.localContentUrl)
       }
-      const serverAddress = this.$store.getters['user/getServerAddress']
+
       if (this.ebookFileId) {
-        return `${serverAddress}/api/items/${this.selectedLibraryItem.id}/ebook/${this.ebookFileId}`
+        return `/api/items/${this.selectedLibraryItem.id}/ebook/${this.ebookFileId}`
       }
-      return `${serverAddress}/api/items/${this.selectedLibraryItem.id}/ebook`
+      return `/api/items/${this.selectedLibraryItem.id}/ebook`
     },
     isPlayerOpen() {
       return this.$store.getters['getIsPlayerOpen']