strava-frontend/src/main.ts

130 lines
3.7 KiB
TypeScript

import { createApp } from "vue";
import i18n from "./i18n";
import { createVuestic } from "vuestic-ui";
import { createGtm } from "@gtm-support/vue-gtm";
import { createHead } from "unhead/client";
import { headSymbol } from "@unhead/vue";
import { setupSeo } from "./router/seo";
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";
import { AxiosResponse } from "axios";
import { createYmaps } from "vue-yandex-maps";
const HOST = "https://cycle-rider.ru";
// const HOST = "http://localhost:8000";
axios.defaults.baseURL = HOST;
const axiosPublic = axios.create({
baseURL: HOST,
timeout: 60000,
});
const axiosAuth = axios.create({
baseURL: HOST,
timeout: 60000,
});
axiosAuth.interceptors.request.use(
function (config) {
const token = localStorage.getItem("token");
config.headers.Authorization = `Bearer ${token}`;
return config;
},
function (error) {
return Promise.reject(error);
},
);
function httpErrorHandler(error: any) {
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
}
}
console.log(error.status, error.message);
throw error;
}
function responseHandler(response: AxiosResponse<any>) {
return response;
}
function responseErrorHandler(response: any) {
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);
axiosPublic.interceptors.response.use(responseHandler, responseErrorHandler);
const app = createApp(App);
app.provide("axiosAuth", axiosAuth);
app.provide("axiosPublic", axiosPublic);
app.use(stores);
app.use(router);
const head = createHead();
app.provide(headSymbol, head);
setupSeo(router, head);
app.use(i18n);
app.use(createVuestic({ config: vuesticGlobalConfig }));
app.use(
createYmaps({
apikey: "6f86a7b9-e51a-4708-8ac3-ac1285807fa1",
}),
);
app.provide("HOST", HOST);
if (import.meta.env.VITE_APP_GTM_ENABLED) {
app.use(
createGtm({
id: import.meta.env.VITE_APP_GTM_KEY,
debug: false,
vueRouter: router,
}),
);
}
if (typeof window !== "undefined" && localStorage.getItem("token")) {
axiosAuth
.get("/api/v0/auth/check")
.then((response: AxiosResponse) => {
console.debug("authAuthenticated");
})
.catch((error: any) => {
localStorage.clear();
});
}
app.mount("#app");