From 2038ca5322f3f474ebf5bc5dceafdd0bc6c9db86 Mon Sep 17 00:00:00 2001 From: artem Date: Tue, 17 Sep 2024 16:07:57 +0300 Subject: [PATCH] auto logout when 401 --- src/main.ts | 71 ++++++++++++++++++- src/pages/auth/CheckTheEmail.vue | 8 +-- src/pages/auth/Login.vue | 2 +- src/pages/auth/RecoverPassword.vue | 4 +- src/pages/auth/Signup.vue | 4 +- .../preferences-header/PreferencesHeader.vue | 21 ++---- src/pages/workouts/WorkoutUpload.vue | 9 ++- 7 files changed, 87 insertions(+), 32 deletions(-) diff --git a/src/main.ts b/src/main.ts index 16c0aa1..3054f64 100644 --- a/src/main.ts +++ b/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) { + 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({ diff --git a/src/pages/auth/CheckTheEmail.vue b/src/pages/auth/CheckTheEmail.vue index 79e3b9a..87fd7d0 100644 --- a/src/pages/auth/CheckTheEmail.vue +++ b/src/pages/auth/CheckTheEmail.vue @@ -15,21 +15,21 @@