frontend: user

service for api call, store for store data

frontend/src/services/userAPI.js

@@ -0,0 +1,50 @@
+// src/services/userAPI.js
+
+import axios from "axios";
+import { API_BASE_URL } from "@/config";
+import { refreshToken } from "@/services/refreshToken";
+
+const apiClient = axios.create({
+  baseURL: API_BASE_URL,
+  withCredentials: false,
+  headers: {
+    Accept: "application/json",
+    "Content-Type": "application/json",
+    Authorization: `Bearer ${localStorage.getItem("accessToken")}`,
+  },
+});
+
+// Request interceptor to add the token
+apiClient.interceptors.request.use((config) => {
+  const token = localStorage.getItem("accessToken");
+  if (token) {
+    config.headers.Authorization = `Bearer ${token}`;
+  }
+  return config;
+}, (error) => {
+  return Promise.reject(error);
+});
+
+// Response interceptor to handle errors
+apiClient.interceptors.response.use(
+  (response) => response,
+  async (error) => {
+    if (error.response.status === 401) {
+      // Handle unauthorized error (e.g., refresh token or redirect to login)
+      try {
+        await refreshToken();
+        return apiClient(error.config); // Retry the original request
+      } catch (refreshError) {
+        localStorage.removeItem("accessToken");
+        window.location.href = "/login"; // Redirect to login page
+      }
+    }
+    return Promise.reject(error);
+  }
+);
+
+export const getUserProfile = () => {
+  return apiClient.get("/api/v1/users/profile");
+};
+
+export default {};

frontend/src/store/index.js

@@ -1,11 +1,13 @@
 import Vuex from "vuex";
 import category from "./modules/category";
 import setup from "./modules/setup";
+import user from "@/store/modules/user";
 
 export default new Vuex.Store({
   modules: {
     category,
     setup,
+    user,
   },
 });
 

frontend/src/store/modules/auth.js

@@ -1,3 +1,5 @@
+// src/store/modules/auth.js
+
 export const state = () => ({
   token: localStorage.getItem("token"),
   refreshToken: localStorage.getItem("refresh_token"),
@@ -59,4 +61,4 @@ export const actions = {
 
 export const getters = {
   token: (state) => state.token,
-};
+};

frontend/src/store/modules/category.js

@@ -1,4 +1,4 @@
-// /src/store/modules/category.js
+// src/store/modules/category.js
 
 import {
     getCategoryForAdmin,
@@ -90,4 +90,4 @@ export default {
     mutations,
     actions,
     getters,
-};
+};

frontend/src/store/modules/setup.js

@@ -1,4 +1,4 @@
-// /src/store/modules/setup.js
+// src/store/modules/setup.js
 
 import {
   getSetupForAdmin,

frontend/src/store/modules/user.js

@@ -0,0 +1,34 @@
+// src/store/modules/category.js
+
+import {
+  getUserProfile,
+} from "@/services/userAPI";
+
+const state = {
+  profile: {},
+};
+
+const mutations = {
+  setUserProfile(state, profile) {
+    state.profile = profile;
+  },
+};
+
+const actions = {
+  async fetchUserProfile({ commit }) {
+    const response = await getUserProfile();
+    commit("setUserProfile", response.data);
+  },
+};
+
+const getters = {
+  profile: (state) => state.profile,
+};
+
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions,
+  getters,
+};