Improve security

vue/src/components/AppNav.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { ref, computed, onMounted, onUnmounted } from 'vue'
 import { RouterLink, useRouter, useRoute } from 'vue-router'
-import { useFeeds } from '@/composables/useFeeds'
+import { useFeeds, logout as logoutSession } from '@/composables/useFeeds'
 import Modal from './modal/AddUrl.vue'
 
 const router = useRouter()
@@ -36,9 +36,8 @@ function closeMenu() {
   menuOpen.value = false
 }
 
-function logout() {
-  localStorage.removeItem('user-token')
-  localStorage.removeItem('user-id')
+async function logout() {
+  await logoutSession()
   closeMenu()
   router.push({ name: 'login' })
 }

vue/src/composables/useFeeds.js

@@ -16,7 +16,7 @@ const navTitleVisible = ref(true) // whether AppNav's "RSS Reader (N)" title is
 let observer; // Declare observer outside the setup function
 let initialLoad = false
 
-function authHeaders() {
+export function authHeaders() {
   return {
     headers: {
       'Content-Type': 'application/json',
@@ -25,6 +25,20 @@ function authHeaders() {
   }
 }
 
+// Tells the server to revoke the current token (bumps token_version, so any
+// other outstanding tokens for this account are invalidated too) before
+// clearing the local session. Best-effort: if the request fails (e.g. the
+// token already expired) the local session is cleared regardless.
+export async function logout() {
+  try {
+    await axios.post('/api/v1/auth/logout', null, authHeaders())
+  } catch (error) {
+    console.error('Error logging out', error)
+  }
+  localStorage.removeItem('user-token')
+  localStorage.removeItem('user-id')
+}
+
 // Some feeds (e.g. Deutsche Welle) ship <img> tags whose `src` and various
 // lazy-load attributes (`data-url`, `data-src`, `srcset`, ...) contain an
 // unresolved `${placeholderName}` template — or its URL-encoded `%7B...%7D`

vue/src/main.js

@@ -1,8 +1,28 @@
 import './assets/main.css'
 
+import axios from 'axios'
 import { createApp } from 'vue'
 import App from './App.vue'
 import router from './router'
+
+// A 401 means the server has rejected the token (missing, expired, or
+// revoked via logout/token_version bump elsewhere). Drop the stale session
+// and send the user back to login rather than leaving them on a page where
+// every request silently fails.
+axios.interceptors.response.use(
+  (response) => response,
+  (error) => {
+    if (error.response?.status === 401) {
+      localStorage.removeItem('user-token')
+      localStorage.removeItem('user-id')
+      if (router.currentRoute.value.name !== 'login') {
+        router.push({ name: 'login' })
+      }
+    }
+    return Promise.reject(error)
+  }
+)
+
 const app = createApp(App)
 
 app.use(router)