flaschengeist-frontend/src/boot/axios.ts

import config from 'src/config';
import { boot } from 'quasar/wrappers';
import { LocalStorage, Notify } from 'quasar';
import axios, { AxiosError, AxiosInstance } from 'axios';
import { UserSessionState } from 'src/plugins/user/store';

declare module '@vue/runtime-core' {
  interface ComponentCustomProperties {
    $axios: AxiosInstance;
  }
}

const api = axios.create({
  baseURL: <string | undefined>LocalStorage.getItem('baseURL') || config.baseURL,
});

export default boot<UserSessionState>(({ app, store, router }) => {
  /***
   * Intercept requests and insert Token if available
   */
  api.interceptors.request.use((config) => {
    const session = store.state.sessions.currentSession;
    if (session?.token) {
      config.headers = { Authorization: 'Bearer ' + session.token };
    }
    return config;
  });

  /***
   * Intercept responses
   *   - filter 401 --> logout
   *   - filter timeout or 502-504 --> backendOffline
   */
  axios.interceptors.response.use(
    (response) => response,
    (error) => {
      if (error) {
        const e = <AxiosError>error;
        if (
          e.code === 'ECONNABORTED' ||
          (e.response && e.response.status >= 502 && e.response.status <= 504)
        ) {
          const current = router.currentRoute.value;
          let next = current.path;
          if ((current.name == 'login' || current.name == 'offline') && current.query.redirect)
            next = <string>current.query.redirect;
          return router.push({
            name: 'offline',
            query: { redirect: next },
          });
        } else if (e.response && e.response.status == 401) {
          if (router.currentRoute.value.name !== 'login')
            return store.dispatch('session/clearCurrent');
        }
      }
      return Promise.reject(error);
    }
  );
  // for use inside Vue files (Options API) through this.$axios and this.$api

  app.config.globalProperties.$axios = axios;
  // ^ ^ ^ this will allow you to use this.$axios (for Vue Options API form)
  //       so you won't necessarily have to import axios in each vue file

  app.config.globalProperties.$api = api;
  // ^ ^ ^ this will allow you to use this.$api (for Vue Options API form)
  //       so you can easily perform requests against your app's API
});

export { axios, api };

export const setBaseUrl = (url: string) => {
  LocalStorage.set('baseURL', url);
  axios.defaults.baseURL = url;
  Notify.create({
    message: 'Serveraddresse gespeichert',
    position: 'bottom',
    caption: `${url}`,
    color: 'positive',
  });
  setTimeout(() => {
    window.location.reload();
  }, 5000);
};