diff --git a/package-lock.json b/package-lock.json index d482f66320..e8b7fdd8c2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,6 +11,7 @@ "@carbon/icons-vue": "10.28.0", "@novnc/novnc": "1.2.0", "axios": "1.6.0", + "axios-cache-interceptor": "1.5.1", "bootstrap": "4.6.0", "bootstrap-vue": "2.21.2", "core-js": "3.9.1", @@ -5752,6 +5753,25 @@ "proxy-from-env": "^1.1.0" } }, + "node_modules/axios-cache-interceptor": { + "version": "1.5.1", + "resolved": "https://registry.npmjs.org/axios-cache-interceptor/-/axios-cache-interceptor-1.5.1.tgz", + "integrity": "sha512-1p/rTi7DSqUghJ5Ck8GKNt47X6f3IB8XnJ+TM4PwIdhimmCgh0jEQiwI8mBvf2kIMIl4Kz5idwbf/ouK75nEHA==", + "dependencies": { + "cache-parser": "1.2.4", + "fast-defer": "1.1.8", + "object-code": "1.3.2" + }, + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/arthurfiorette/axios-cache-interceptor?sponsor=1" + }, + "peerDependencies": { + "axios": "^1" + } + }, "node_modules/axios/node_modules/form-data": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz", @@ -6827,6 +6847,11 @@ "node": ">=4.0.0" } }, + "node_modules/cache-parser": { + "version": "1.2.4", + "resolved": "https://registry.npmjs.org/cache-parser/-/cache-parser-1.2.4.tgz", + "integrity": "sha512-O0KwuHuJnbHUrghHi2kGp0SxnWSIBXTYt7M8WVhW0kbPRUNUKoE/Of6e1rRD6AAxmfxFunKnt90yEK09D+sc5g==" + }, "node_modules/cacheable-request": { "version": "6.1.0", "dev": true, @@ -10644,6 +10669,11 @@ "dev": true, "license": "MIT" }, + "node_modules/fast-defer": { + "version": "1.1.8", + "resolved": "https://registry.npmjs.org/fast-defer/-/fast-defer-1.1.8.tgz", + "integrity": "sha512-lEJeOH5VL5R09j6AA0D4Uvq7AgsHw0dAImQQ+F3iSyHZuAxyQfWobsagGpTcOPvJr3urmKRHrs+Gs9hV+/Qm/Q==" + }, "node_modules/fast-diff": { "version": "1.3.0", "dev": true, @@ -15862,6 +15892,11 @@ "node": ">=0.10.0" } }, + "node_modules/object-code": { + "version": "1.3.2", + "resolved": "https://registry.npmjs.org/object-code/-/object-code-1.3.2.tgz", + "integrity": "sha512-3CVDmQiru7YYVr+4OpCGrqkVE7GogmWinDcgfno1fXlKgIhtW9FhgHTiV98gMPUjQwWuWvijQDCY8sGnqKrhTw==" + }, "node_modules/object-copy": { "version": "0.1.0", "dev": true, diff --git a/package.json b/package.json index 18f3aded7f..be2fb417d3 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,7 @@ "@carbon/icons-vue": "10.28.0", "@novnc/novnc": "1.2.0", "axios": "1.6.0", + "axios-cache-interceptor": "1.5.1", "bootstrap": "4.6.0", "bootstrap-vue": "2.21.2", "core-js": "3.9.1", diff --git a/src/store/api.js b/src/store/api.js index 9fd900d267..0bd84e621a 100644 --- a/src/store/api.js +++ b/src/store/api.js @@ -1,4 +1,6 @@ import Axios from 'axios'; +import { setupCache, buildWebStorage } from 'axios-cache-interceptor'; + //Do not change store import. //Exact match alias set to support //dotenv customizations. @@ -7,10 +9,21 @@ import store from '../store'; Axios.defaults.headers.common['Accept'] = 'application/json'; Axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest'; -const api = Axios.create({ +const axiosInstance = Axios.create({ withCredentials: true, }); +const api = setupCache(axiosInstance, { + debug: console.log, + methods: ['get'], + interpretHeader: false, + etag: true, + modifiedSince: false, + staleIfError: false, + ttl: 0, + storage: buildWebStorage(localStorage, 'webui-vue-cache:'), +}); + api.interceptors.response.use(undefined, (error) => { let response = error.response;