From 586884cc95178c5d66586043bbd95f81b8169da5 Mon Sep 17 00:00:00 2001
From: zhenghaoz <zhangzhenghao@hotmail.com>
Date: Mon, 8 Jun 2026 09:19:31 +0800
Subject: [PATCH 1/2] fix: guard dashboard authentication routes

---
 .../layout/MainNavbar/MainNavbar.vue          | 13 +++--
 src/layouts/Login.vue                         | 47 +++++++++++++++----
 src/main.js                                   | 18 +++++++
 src/router.js                                 | 43 ++++++++++++++++-
 src/utils/auth.js                             | 21 +++++++++
 5 files changed, 130 insertions(+), 12 deletions(-)
 create mode 100644 src/utils/auth.js

diff --git a/src/components/layout/MainNavbar/MainNavbar.vue b/src/components/layout/MainNavbar/MainNavbar.vue
index 23323cf..93c8b1d 100644
--- a/src/components/layout/MainNavbar/MainNavbar.vue
+++ b/src/components/layout/MainNavbar/MainNavbar.vue
@@ -40,9 +40,8 @@
             v-if="userInfo.auth_type.length === 0"
             id="user-actions"
             class="dropdown-menu dropdown-menu-small">
-            <d-dropdown-item href="#" class="text-danger">
-              <a style="text-decoration: none; color: inherit;" href="/logout">
-                <i class="material-icons text-danger">&#xE879;</i> Logout</a>
+            <d-dropdown-item href="#" class="text-danger" @click.prevent="logout">
+              <i class="material-icons text-danger">&#xE879;</i> Logout
             </d-dropdown-item>
           </d-collapse>
         </li>
@@ -55,6 +54,7 @@
 <script>
 import axios from 'axios';
 import multiavatar from '@multiavatar/multiavatar';
+import { clearLoginStatus } from '@/utils/auth';
 import {
   applyTheme,
   DARK_THEME,
@@ -155,6 +155,13 @@ export default {
       const encodedSvg = encodeURIComponent(svg.documentElement.outerHTML);
       return `data:image/svg+xml;charset=utf-8,${encodedSvg}`;
     },
+    async logout() {
+      await axios.post('/logout', null, {
+        skipAuthRedirect: true,
+      });
+      clearLoginStatus();
+      this.$router.push({ name: 'login' });
+    },
   },
 };
 </script>
diff --git a/src/layouts/Login.vue b/src/layouts/Login.vue
index b2909e7..19eb03b 100644
--- a/src/layouts/Login.vue
+++ b/src/layouts/Login.vue
@@ -1,19 +1,22 @@
 <template>
   <d-container>
     <div style="text-align: center;" class="align-center">
-      <img style="width: 120px; margin-top: 60px; margin-bottom: 20px" src="@/assets/images/gorse.png"/>
+      <img style="width: 120px; margin-top: 60px; margin-bottom: 20px" src="@/assets/images/gorse.png" alt="Gorse" />
       <h5>Welcome to Gorse dashboard</h5>
       <d-card>
         <d-card-body>
-          <d-form method="post" action="/login">
+          <d-form @submit.prevent="login">
             <label class="sr-only" for="username">Username</label>
-            <d-form-input id="username" name="user_name" class="mb-1" placeholder="Username" />
+            <d-form-input id="username" v-model="userName" name="user_name" class="mb-1" placeholder="Username" />
             <label class="sr-only" for="password">Password</label>
-            <d-form-input id="password" name="password" class="mt-2" type="password" placeholder="Password" />
-            <d-alert v-if="this.$route.query.msg === 'incorrect'" theme="danger" class="mt-2"
-                     :show="timeUntilDismissed"
-                     @alert-dismissed="timeUntilDismissed = 0"
-                     @alert-dismiss-countdown="handleTimeChange">The user name or password is incorrect.</d-alert>
+            <d-form-input id="password" v-model="password" name="password" class="mt-2" type="password" placeholder="Password" />
+            <d-alert
+              v-if="loginFailed"
+              theme="danger"
+              class="mt-2"
+              :show="timeUntilDismissed"
+              @alert-dismissed="timeUntilDismissed = 0"
+              @alert-dismiss-countdown="handleTimeChange">The user name or password is incorrect.</d-alert>
             <d-button class="mt-2" theme="primary" type="submit">Login</d-button>
           </d-form>
         </d-card-body>
@@ -30,9 +33,15 @@
 </style>
 
 <script>
+import axios from 'axios';
+import { setLoginStatus } from '@/utils/auth';
+
 export default {
   data() {
     return {
+      userName: '',
+      password: '',
+      loginFailed: false,
       timeUntilDismissed: 5,
     };
   },
@@ -40,6 +49,28 @@ export default {
     handleTimeChange(time) {
       this.timeUntilDismissed = time;
     },
+    async login() {
+      const form = new URLSearchParams();
+      form.append('user_name', this.userName);
+      form.append('password', this.password);
+
+      try {
+        await axios.post('/login', form, {
+          headers: {
+            'Content-Type': 'application/x-www-form-urlencoded',
+          },
+          skipAuthRedirect: true,
+        });
+        setLoginStatus(true);
+        this.$router.push(this.$route.query.redirect || '/overview');
+      } catch (error) {
+        if (error.response && error.response.status === 401) {
+          setLoginStatus(false);
+          this.loginFailed = true;
+          this.timeUntilDismissed = 5;
+        }
+      }
+    },
   },
 };
 </script>
diff --git a/src/main.js b/src/main.js
index 9e33511..dac97d7 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,4 +1,5 @@
 /* eslint-disable */
+import axios from 'axios';
 import { createApp } from 'vue';
 import ShardsVue from '@gorse/shards-vue';
 
@@ -19,6 +20,7 @@ import 'material-icons/iconfont/material-icons.css';
 // Core
 import App from './App.vue';
 import router from './router';
+import { clearLoginStatus } from './utils/auth';
 import { applyTheme, getPreferredTheme } from './utils/theme';
 
 // Layouts
@@ -58,6 +60,22 @@ const app = createApp(App);
 
 applyTheme(getPreferredTheme());
 
+axios.interceptors.response.use(
+  (response) => response,
+  (error) => {
+    if (error.response && error.response.status === 401 && !(error.config && error.config.skipAuthRedirect)) {
+      clearLoginStatus();
+      if (router.currentRoute.value.name !== 'login') {
+        router.push({
+          name: 'login',
+          query: { redirect: router.currentRoute.value.fullPath },
+        });
+      }
+    }
+    return Promise.reject(error);
+  },
+);
+
 app.use(router);
 app.use(ShardsVue);
 app.use(hljsVuePlugin);
diff --git a/src/router.js b/src/router.js
index 34fd2a2..778b70a 100644
--- a/src/router.js
+++ b/src/router.js
@@ -1,3 +1,4 @@
+import axios from 'axios';
 import { createRouter, createWebHistory } from 'vue-router';
 
 import Tasks from './views/Tasks.vue';
@@ -16,8 +17,9 @@ import ImportItems from './views/ImportItems.vue';
 import ImportUsers from './views/ImportUsers.vue';
 import ImportFeedback from './views/ImportFeedback.vue';
 import RecFlow from './views/RecFlow.vue';
+import { getLoginStatus, setLoginStatus } from './utils/auth';
 
-export default createRouter({
+const router = createRouter({
   history: createWebHistory(process.env.BASE_URL),
   linkActiveClass: 'active',
   linkExactActiveClass: 'exact-active',
@@ -120,3 +122,42 @@ export default createRouter({
     },
   ],
 });
+
+router.beforeEach(async (to, from, next) => {
+  if (to.name === 'login') {
+    if (getLoginStatus() === true) {
+      next(to.query.redirect || '/overview');
+    } else {
+      next();
+    }
+    return;
+  }
+
+  const loginStatus = getLoginStatus();
+  if (loginStatus === true) {
+    next();
+    return;
+  }
+
+  if (loginStatus === false) {
+    next({ name: 'login', query: { redirect: to.fullPath } });
+    return;
+  }
+
+  try {
+    await axios.get('/api/dashboard/userinfo', {
+      skipAuthRedirect: true,
+    });
+    setLoginStatus(true);
+    next();
+  } catch (error) {
+    if (error.response && error.response.status === 401) {
+      setLoginStatus(false);
+      next({ name: 'login', query: { redirect: to.fullPath } });
+      return;
+    }
+    next();
+  }
+});
+
+export default router;
diff --git a/src/utils/auth.js b/src/utils/auth.js
new file mode 100644
index 0000000..02b3ee3
--- /dev/null
+++ b/src/utils/auth.js
@@ -0,0 +1,21 @@
+const LOGIN_STATUS_KEY = 'gorse_dashboard_login_status';
+
+let loginStatus = sessionStorage.getItem(LOGIN_STATUS_KEY);
+loginStatus = loginStatus === null ? null : loginStatus === 'true';
+
+export function getLoginStatus() {
+  return loginStatus;
+}
+
+export function setLoginStatus(status) {
+  loginStatus = status;
+  if (status === null) {
+    sessionStorage.removeItem(LOGIN_STATUS_KEY);
+  } else {
+    sessionStorage.setItem(LOGIN_STATUS_KEY, status ? 'true' : 'false');
+  }
+}
+
+export function clearLoginStatus() {
+  setLoginStatus(false);
+}

From 8d61d283e6bff4f4f94bbc69be146e6881a04577 Mon Sep 17 00:00:00 2001
From: Zhenghao Zhang <zhangzhenghao@hotmail.com>
Date: Fri, 12 Jun 2026 00:36:38 +0800
Subject: [PATCH 2/2] refactor: simplify authentication flow and remove unused
 scripts

---
 package.json                         |  6 ++--
 scripts/vue-cli-service.js           | 37 ----------------------
 scripts/webpack-dev-server-compat.js | 14 ---------
 src/main.js                          |  7 +++--
 src/router.js                        | 46 +++++++++++++++++++---------
 5 files changed, 39 insertions(+), 71 deletions(-)
 delete mode 100644 scripts/vue-cli-service.js
 delete mode 100644 scripts/webpack-dev-server-compat.js

diff --git a/package.json b/package.json
index 744ed1c..c6d9788 100644
--- a/package.json
+++ b/package.json
@@ -5,9 +5,9 @@
   "license": "MIT",
   "packageManager": "pnpm@10.33.0",
   "scripts": {
-    "lint": "node scripts/vue-cli-service.js lint",
-    "serve": "node scripts/vue-cli-service.js serve",
-    "build": "node scripts/vue-cli-service.js build",
+    "lint": "vue-cli-service lint",
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
     "test": "jest"
   },
   "dependencies": {
diff --git a/scripts/vue-cli-service.js b/scripts/vue-cli-service.js
deleted file mode 100644
index f078962..0000000
--- a/scripts/vue-cli-service.js
+++ /dev/null
@@ -1,37 +0,0 @@
-const { spawn } = require('child_process');
-const path = require('path');
-
-const args = process.argv.slice(2);
-const env = { ...process.env };
-const opensslLegacyProvider = '--openssl-legacy-provider';
-const nodeMajor = Number(process.versions.node.split('.')[0]);
-const cliArgs = [];
-
-if (nodeMajor >= 17 && !(env.NODE_OPTIONS || '').includes(opensslLegacyProvider)) {
-  env.NODE_OPTIONS = [env.NODE_OPTIONS, opensslLegacyProvider].filter(Boolean).join(' ');
-}
-
-if (args[0] === 'serve') {
-  cliArgs.push('--require', path.join(__dirname, 'webpack-dev-server-compat.js'));
-}
-
-const child = spawn(
-  process.execPath,
-  [...cliArgs, require.resolve('@vue/cli-service/bin/vue-cli-service.js'), ...args],
-  {
-    env,
-    stdio: 'inherit',
-  },
-);
-
-child.on('close', (code, signal) => {
-  if (signal === 'SIGINT') {
-    process.exit(130);
-  }
-
-  if (signal === 'SIGTERM') {
-    process.exit(143);
-  }
-
-  process.exit(code || 0);
-});
diff --git a/scripts/webpack-dev-server-compat.js b/scripts/webpack-dev-server-compat.js
deleted file mode 100644
index 1bc9cd5..0000000
--- a/scripts/webpack-dev-server-compat.js
+++ /dev/null
@@ -1,14 +0,0 @@
-const Module = require('module');
-const https = require('https');
-
-const originalLoad = Module._load;
-
-Module._load = function load(request, parent, isMain) {
-  if (request === 'spdy') {
-    return {
-      createServer: https.createServer,
-    };
-  }
-
-  return originalLoad.apply(this, arguments);
-};
diff --git a/src/main.js b/src/main.js
index dac97d7..60628bd 100644
--- a/src/main.js
+++ b/src/main.js
@@ -69,8 +69,9 @@ axios.interceptors.response.use(
         router.push({
           name: 'login',
           query: { redirect: router.currentRoute.value.fullPath },
-        });
+        }).catch(() => {});
       }
+      return new Promise(() => {});
     }
     return Promise.reject(error);
   },
@@ -84,4 +85,6 @@ app.component('default-layout', Default);
 app.component('login-layout', Login);
 app.config.globalProperties.$eventHub = createEventHub();
 
-app.mount('#app');
+router.isReady().then(() => {
+  app.mount('#app');
+});
diff --git a/src/router.js b/src/router.js
index 778b70a..a76e525 100644
--- a/src/router.js
+++ b/src/router.js
@@ -19,6 +19,22 @@ import ImportFeedback from './views/ImportFeedback.vue';
 import RecFlow from './views/RecFlow.vue';
 import { getLoginStatus, setLoginStatus } from './utils/auth';
 
+async function verifyLoginStatus() {
+  try {
+    await axios.get('/api/dashboard/userinfo', {
+      skipAuthRedirect: true,
+    });
+    setLoginStatus(true);
+    return true;
+  } catch (error) {
+    if (error.response && error.response.status === 401) {
+      setLoginStatus(false);
+      return false;
+    }
+    return null;
+  }
+}
+
 const router = createRouter({
   history: createWebHistory(process.env.BASE_URL),
   linkActiveClass: 'active',
@@ -126,15 +142,23 @@ const router = createRouter({
 router.beforeEach(async (to, from, next) => {
   if (to.name === 'login') {
     if (getLoginStatus() === true) {
-      next(to.query.redirect || '/overview');
-    } else {
-      next();
+      const isLoggedIn = await verifyLoginStatus();
+      if (isLoggedIn === true) {
+        next(to.query.redirect || '/overview');
+        return;
+      }
     }
+    next();
     return;
   }
 
   const loginStatus = getLoginStatus();
   if (loginStatus === true) {
+    const isLoggedIn = await verifyLoginStatus();
+    if (isLoggedIn === false) {
+      next({ name: 'login', query: { redirect: to.fullPath } });
+      return;
+    }
     next();
     return;
   }
@@ -144,18 +168,10 @@ router.beforeEach(async (to, from, next) => {
     return;
   }
 
-  try {
-    await axios.get('/api/dashboard/userinfo', {
-      skipAuthRedirect: true,
-    });
-    setLoginStatus(true);
-    next();
-  } catch (error) {
-    if (error.response && error.response.status === 401) {
-      setLoginStatus(false);
-      next({ name: 'login', query: { redirect: to.fullPath } });
-      return;
-    }
+  const isLoggedIn = await verifyLoginStatus();
+  if (isLoggedIn === false) {
+    next({ name: 'login', query: { redirect: to.fullPath } });
+  } else {
     next();
   }
 });