🛂 Implements HTTP authorization client-side

src/store.js

@@ -8,7 +8,7 @@ import { makePageName, formatConfigPath, componentVisibility } from '@/utils/Con
 import { applyItemId } from '@/utils/SectionHelpers';
 import filterUserSections from '@/utils/CheckSectionVisibility';
 import ErrorHandler, { InfoHandler, InfoKeys } from '@/utils/ErrorHandler';
-import { isUserAdmin } from '@/utils/Auth';
+import { isUserAdmin, makeBasicAuthHeaders } from '@/utils/Auth';
 import { localStorageKeys, theme as defaultTheme } from './utils/defaults';
 
 Vue.use(Vuex);
@@ -355,7 +355,7 @@ const store = new Vuex.Store({
       const configFilePath = process.env.VUE_APP_CONFIG_PATH || '/conf.yml';
       try {
         // Attempt to fetch the YAML file
-        const response = await axios.get(configFilePath);
+        const response = await axios.get(configFilePath, makeBasicAuthHeaders());
         let data;
         try {
           data = yaml.load(response.data);
@@ -425,8 +425,7 @@ const store = new Vuex.Store({
           commit(CRITICAL_ERROR_MSG, `Unable to find config for '${subConfigId}'`);
           return { ...emptyConfig };
         }
-
+        axios.get(subConfigPath, makeBasicAuthHeaders()).then((response) => {
-        axios.get(subConfigPath).then((response) => {
           // Parse the YAML
           const configContent = yaml.load(response.data) || {};
           // Certain values must be inherited from root config

src/utils/Auth.js

@@ -50,28 +50,39 @@ const generateUserToken = (user) => {
   return strAndUpper(sha);
 };
 
+export const getCookieToken = () => {
+  const value = `; ${document.cookie}`;
+  const parts = value.split(`; ${cookieKeys.AUTH_TOKEN}=`);
+  if (parts.length === 2) return parts.pop().split(';').shift();
+  return null;
+};
+
+export const makeBasicAuthHeaders = () => {
+  const token = getCookieToken();
+  const bearerAuth = token ? `Bearer ${token}` : null;
+
+  const username = process.env.VUE_APP_BASIC_AUTH_USERNAME || 'user';
+  const password = process.env.VUE_APP_BASIC_AUTH_PASSWORD || bearerAuth;
+  const basicAuth = `Basic ${btoa(`${username}:${password}`)}`;
+
+  return (token || username)
+    ? { headers: { Authorization: basicAuth, 'WWW-Authenticate': 'true' } }
+    : {};
+};
+
 /**
  * Checks if the user is currently authenticated
  * @returns {Boolean} Will return true if the user is logged in, else false
  */
 export const isLoggedIn = () => {
   const users = getUsers();
-  let userAuthenticated = document.cookie.split(';').some((cookie) => {
+  const cookieToken = getCookieToken();
-    if (cookie && cookie.split('=').length > 1) {
+  return users.some((user) => {
-      const cookieKey = cookie.split('=')[0].trim();
+    if (generateUserToken(user) === cookieToken) {
-      const cookieValue = cookie.split('=')[1].trim();
+      localStorage.setItem(localStorageKeys.USERNAME, user.user);
-      if (cookieKey === cookieKeys.AUTH_TOKEN) {
+      return true;
-        userAuthenticated = users.some((user) => {
-          if (generateUserToken(user) === cookieValue) {
-            localStorage.setItem(localStorageKeys.USERNAME, user.user);
-            return true;
-          } else return false;
-        });
-        return userAuthenticated;
-      } else return false;
     } else return false;
   });
-  return userAuthenticated;
 };
 
 /* Returns true if authentication is enabled */