When users log in, they have the option to choose from 3 domains: dev, demo, and sandbox. The configuration for these domains is set in the Boot.js file using Axios. The boot file is triggered prior to the firing of the Vue instance. Below is the content of the boot file:
import { boot } from "quasar/wrappers";
import axios from "axios";
import { LocalStorage } from "quasar";
import { Platform } from "quasar";
let baseURL = LocalStorage.getItem("basepath");
let api = axios.create({ baseURL: baseURL });
export default boot(({ app }) => {
// for use inside Vue files (Options API) through this.$axios and this.$api
app.config.globalProperties.$axios = axios;
app.config.globalProperties.$api = api;
});
export { axios, api };
The script section of the login file looks like this:
<script>
import { LocalStorage } from "quasar";
export default {
data() {
return {
companyList: [{
id: "dev",
site: "https://dev.mycompany.com",
},
{
id: "demo",
site: "https://demo.mycompany.com",
},
{
id: "sandbox",
site: "https://sandbox.mycompany.com",
},
],
loginData: {
username: "",
password: "",
companyid: "",
},
};
},
methods: {
checkCompanyId(payload) {
let temp = this.companyList.find((o) => o.id == payload.toLowerCase());
if (temp) {
LocalStorage.set("basepath", temp.site);
return true;
} else {
return false;
}
},
submitForm() {
const CompanyId = this.checkCompanyId(this.loginData.companyid);
if (CompanyId) {
this.loginProcess(this.loginData);
} else {
console.log('Company ID can't be found!')
}
}
},
}
}
</script>
The challenge arises when the value in Local Storage changes but the variable baseURL in Boot.js does not change unless the page is reloaded. Is there a way to update the baseURL variable whenever the local storage has been modified?