Check dashboard authentication in frontend

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": {

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>

src/layouts/Login.vue

@@ -5,13 +5,13 @@
       <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-form-input id="password" v-model="password" name="password" class="mt-2" type="password" placeholder="Password" />
             <d-alert
-              v-if="this.$route.query.msg === 'incorrect'"
+              v-if="loginFailed"
               theme="danger"
               class="mt-2"
               :show="timeUntilDismissed"
@@ -33,16 +33,44 @@
 </style>
 
 <script>
+import axios from 'axios';
+import { setLoginStatus } from '@/utils/auth';
+
 export default {
   data() {
     return {
+      userName: '',
+      password: '',
+      loginFailed: false,
       timeUntilDismissed: 5,
     };
   },
   methods: {
     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>

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,23 @@ 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 },
+        }).catch(() => {});
+      }
+      return new Promise(() => {});
+    }
+    return Promise.reject(error);
+  },
+);
+
 app.use(router);
 app.use(ShardsVue);
 app.use(hljsVuePlugin);
@@ -66,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');
+});

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,25 @@ 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({
+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',
   linkExactActiveClass: 'exact-active',
@@ -120,3 +138,42 @@ export default createRouter({
     },
   ],
 });
+
+router.beforeEach(async (to, from, next) => {
+  if (to.name === 'login') {
+    if (getLoginStatus() === true) {
+      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;
+  }
+
+  if (loginStatus === 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();
+  }
+});
+
+export default router;

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);
+}