auto logout when 401

src/main.ts

@@ -7,15 +7,82 @@ import stores from "./stores";
 import router from "./router";
 import vuesticGlobalConfig from "./services/vuestic-ui/global-config";
 import App from "./App.vue";
+import axios from 'axios';
 
+const HOST = "https://cycle-rider.ru";
+// const HOST = "http://localhost:8000";
+
+axios.defaults.baseURL = HOST;
+
+const axiosAuth = axios.create ({
+  baseURL : HOST,
+  timeout: 60000,
+});
+
+axiosAuth.interceptors.request.use(
+  function (config) {
+    // Do something before request is sent
+    const token = localStorage.getItem('token') //do not store token on localstorage!!!
+    config.headers.Authorization = `Bearer ${token}`;
+    return config
+  },
+  function (error) {
+    // Do something with request error
+    return Promise.reject(error)
+  }
+);
+function httpErrorHandler(error) {
+  if (error === null) throw new Error('Unrecoverable error!! Error is null!')
+  if (axios.isAxiosError(error)) {
+    //here we have a type guard check, error inside this if will be treated as AxiosError
+    const response = error?.response
+    const request = error?.request
+    const config = error?.config //here we have access the config used to make the api call (we can make a retry using this conf)
+
+    if (error.code === 'ERR_NETWORK') {
+      console.log('connection problems..')
+    } else if (error.code === 'ERR_CANCELED') {
+      console.log('connection canceled..')
+    }
+    if (response) {
+      //The request was made and the server responded with a status code that falls out of the range of 2xx the http status code mentioned above
+      const statusCode = response?.status
+      if (statusCode === 404) {
+        console.log('The requested resource does not exist or has been deleted');
+      } else if (statusCode === 401) {
+        localStorage.clear();
+        router.push({ name: "login" });
+      }
+    } else if (request) {
+      //The request was made but no response was received, `error.request` is an instance of XMLHttpRequest in the browser and an instance of http.ClientRequest in Node.js
+    }
+  }
+  //Something happened in setting up the request and triggered an Error
+  console.log(error.message)
+}
+
+function responseHandler(response: AxiosResponse<any>) {
+  return response
+}
+
+function responseErrorHandler(response) {
+  const config = response?.config
+  if (config.raw) {
+    return response
+  }
+  // the code of this function was written in above section.
+  return httpErrorHandler(response)
+}
+axiosAuth.interceptors.response.use(responseHandler, responseErrorHandler)
 const app = createApp(App);
 
+app.provide('axiosAuth', axiosAuth);
 app.use(stores);
 app.use(router);
 app.use(i18n);
 app.use(createVuestic({ config: vuesticGlobalConfig }));
-app.provide('HOST', "https://cycle-rider.ru");
-//app.provide('HOST', "http://localhost:8000");
+
+app.provide('HOST', HOST);
 if (import.meta.env.VITE_APP_GTM_ENABLED) {
   app.use(
     createGtm({

src/pages/auth/CheckTheEmail.vue

@@ -15,21 +15,21 @@
 <script lang="ts" setup>
 
 import { inject } from 'vue'
-import axios from "axios";
 import { ref } from "vue";
 import { useForm, useToast } from "vuestic-ui";
 import { useRouter, useRoute } from "vue-router";
+
+const axiosAuth = inject('axiosAuth');
 const form = useForm("passwordForm");
 const code = ref("");
 const router = useRouter();
-const HOST = inject('HOST');
 const email = ref(useRoute().query.email?.toString() || "");
 const { init } = useToast();
 
 const submit = () => {
   if (form.validate()) {
-    axios
-      .post(`${HOST}/api/v0/profiles/passwords/confirm/recover`, {
+    axiosAuth
+      .post(`/api/v0/profiles/passwords/confirm/recover`, {
         email: email.value,
         code: code.value,
       })

src/pages/auth/Login.vue

@@ -81,7 +81,7 @@ if (token != undefined && token.length > 0) {
 const submit = () => {
   if (validate()) {
     axios
-      .post(`${HOST}/api/v0/signin`, {
+      .post(`/api/v0/signin`, {
         login: formData.email,
         password: formData.password,
       })

src/pages/auth/RecoverPassword.vue

@@ -25,7 +25,6 @@
 </template>
 
 <script lang="ts" setup>
-import { inject } from 'vue'
 import axios from "axios";
 import { ref } from "vue";
 import { useForm } from "vuestic-ui";
@@ -34,12 +33,11 @@ import { useRouter } from "vue-router";
 const email = ref("");
 const form = useForm("passwordForm");
 const router = useRouter();
-const HOST = inject('HOST');
 
 const submit = () => {
   if (form.validate()) {
     axios
-      .post(`${HOST}/api/v0/profiles/passwords/require/recover`, {
+      .post(`/api/v0/profiles/passwords/require/recover`, {
         email: email.value,
       })
       .then((response) => {

src/pages/auth/Signup.vue

@@ -73,7 +73,6 @@
 </template>
 
 <script lang="ts" setup>
-import { inject } from 'vue'
 import axios from "axios";
 import { reactive } from "vue";
 import { useRouter } from "vue-router";
@@ -82,7 +81,6 @@ import { useForm, useToast } from "vuestic-ui";
 const { validate } = useForm("form");
 const { push } = useRouter();
 const { init } = useToast();
-const HOST = inject('HOST');
 
 const formData = reactive({
   email: "",
@@ -98,7 +96,7 @@ if (token != undefined && token.length > 0) {
 const submit = () => {
   if (validate()) {
     axios
-      .post(`${HOST}/api/v0/signup`, {
+      .post(`/api/v0/signup`, {
         email: formData.email,
         password: formData.password,
       })

src/pages/preferences/preferences-header/PreferencesHeader.vue

@@ -28,11 +28,11 @@
 import { inject } from 'vue'
 import { VaFileUpload } from "vuestic-ui";
 import { useUserStore } from "../../../stores/user-store";
-import axios from "axios";
 import { useToast } from "vuestic-ui/web-components";
-import { ref } from 'vue'
+import { ref } from 'vue';
+
+const axiosAuth = inject('axiosAuth');
 const store = useUserStore();
-const HOST = inject('HOST');
 const { init } = useToast();
 const avatar = ref(store.avatar);
 
@@ -51,22 +51,15 @@ let file: {
 function onFileChanged() {
     var formData = new FormData();
     formData.append("file", file);
-    axios.post(`${HOST}/api/v0/attachment/upload`, formData, {
-        headers: {
-          'Content-Type': 'multipart/form-data',
-          'Authorization': `Bearer ${localStorage.getItem("token")}`,
-        }
-    }).then(function (response) {
+    axiosAuth.post(`/api/v0/attachment/upload`, formData, ).then(function (response) {
         let dataUser = JSON.parse(localStorage.getItem("user")!);
         dataUser["attachment_id"] = response.data.id;
         store.changeAvatar(response.data.url);
         avatar.value = response.data.url;
-        axios
-            .patch(`${HOST}/api/v0/profiles/${store.profileID}`, {
+        axiosAuth
+            .patch(`/api/v0/profiles/${store.profileID}`, {
               "user": dataUser,
-            }, {
-                  headers: { Authorization: `Bearer ${localStorage.getItem("token")}` }
-              })
+            })
             .then((response) => {
               init({ message: "Фото успешно загружено!", color: "success" });
             })

src/pages/workouts/WorkoutUpload.vue

@@ -12,10 +12,9 @@
 <script setup lang="ts">
 import { inject } from 'vue'
 import { VaFileUpload } from "vuestic-ui";
-import axios from "axios";
 import { useToast } from "vuestic-ui/web-components";
 
-const HOST = inject('HOST');
+const axiosAuth = inject('axiosAuth');
 const { init } = useToast();
 
 let file: { 
@@ -33,13 +32,13 @@ let file: {
 function onFileChanged() {
     var formData = new FormData();
     formData.append("file", file);
-    axios.post(`${HOST}/api/v0/attachment/upload`, formData, {
+    axiosAuth.post(`/api/v0/attachment/upload`, formData, {
         headers: {
           'Authorization': `Bearer ${localStorage.getItem("token")}`,
         }
     }).then(function (response) {
-        axios
-            .post(`${HOST}/api/v0/workouts`, {
+      axiosAuth
+            .post(`/api/v0/workouts`, {
               "attachment_id": response.data.id,
               "name": "Новая тренировка",
             }, {