Refactor!: Codebase

src/plugins/api.js

@@ -0,0 +1,35 @@
+import axios from "axios";
+import {inject} from "vue";
+
+const key = Symbol("api");
+
+export default function(app) {
+    if (!import.meta.env.VITE_API_URL) throw new Error("VITE_API_URL is not provided")
+
+    // You create a .env.development file and a .env file
+    // depending on the environment, the correct file will be used
+    const api = axios.create({
+        baseURL: import.meta.env.VITE_API_URL,
+        timeout: 2000,
+    });
+
+    const requestInterceptor = (config) => {
+        const token = localStorage.getItem("jwt");
+        if (token) config.headers["Authorization"] = `Bearer ${token}`;
+        return config;
+    }
+
+    api.interceptors.request.use(requestInterceptor);
+
+    // This is a local injection, to use it in your components you can do this:
+    // const api = inject("api")
+    // api.get("/some-endpoint")
+    app.provide(key, api)
+}
+
+export function useClient() {
+    const api = inject(key)
+    if (!api) throw new Error("api is not provided")
+    return api;
+}
+

src/plugins/clientPlugin.js

@@ -1,34 +0,0 @@
-import axios from "axios";
-import { inject } from 'vue';
-
-const clientKey = Symbol('client');
-
-export default {
-    //todo: Need to have the baseURL in the config for later ( dev and prod env. )
-    install: (app) => {
-        const axiosInstance = axios.create({
-            baseURL: 'https://localhost:5001/',
-            timeout: 2000,
-        });
-
-        axiosInstance.interceptors.request.use((config) => {
-            const token = localStorage.getItem('jwt');
-            if (token) {
-                config.headers.Authorization = `Bearer ${token}`;
-            }
-            return config;
-        }, (error) => {
-            return Promise.reject(error);
-        });
-
-        app.provide(clientKey, axiosInstance);
-    }
-};
-
-export function useClient() {
-    const client = inject(clientKey);
-    if (!client) {
-        throw new Error('Axios instance is not provided');
-    }
-    return client;
-}

src/plugins/store/authStore.js

@@ -1,55 +0,0 @@
-import { defineStore } from 'pinia';
-
-const baseUrl = '/api/Users';
-
-export const useAuthStore = defineStore({
-    id: 'auth',
-    state: () => ({
-        user: null,
-        refreshTokenTimeout: null
-    }),
-    actions: {
-        async login(client, email, password) {
-            const requestBody = {
-                email: email,
-                password: password
-            };
-            try {
-                const response = await client.post(`${baseUrl}/login`, requestBody)
-                this.user = {
-                    accessToken: response.data.accessToken,
-                    refreshToken: response.data.refreshToken,
-                    email: email
-                }
-                localStorage.setItem('jwt', this.user.accessToken);
-                this.startRefreshTokenTimer();
-            } catch (error) {
-                throw new Error('Login failed.')
-            }
-
-
-
-        },
-        logout() {
-            localStorage.setItem('jwt', '');
-            this.stopRefreshTokenTimer();
-            this.user = null;
-
-        },
-        async refreshToken(client) {
-            const response = await client.post(`${baseUrl}/refresh`, {});
-            this.user.accessToken = response.accessToken;
-            localStorage.setItem('jwt', this.user.accessToken);
-
-
-            this.startRefreshTokenTimer();
-        },
-        startRefreshTokenTimer() {
-            const timeout = 50 * 1000;
-            this.refreshTokenTimeout = setTimeout(this.refreshToken, timeout);
-        },
-        stopRefreshTokenTimer() {
-            clearTimeout(this.refreshTokenTimeout);
-        }
-    }
-});