trithuc-mvc-react 3.4.2 → 3.4.3

package/api/index.js

@@ -1,41 +1,87 @@
+import qs from "qs"; // 👈 serialize query params
 import { storeGetlanguage, storeGetToken } from "@/utils/storage";
 import axios from "axios";
 
 let baseUrl = "";
 let apiUrl = "";
 
+/**
+ * Cấu hình base URL cho toàn ứng dụng
+ */
 export function configure({ customBaseUrl, customApiUrl }) {
   if (customBaseUrl) {
     baseUrl = customBaseUrl;
-    apiUrl = customApiUrl;
+    apiUrl = customApiUrl || customBaseUrl;
   } else {
-    console.warn("baseUrl chưa được định cấu hình. Sử dụng giá trị mặc định.");
+    console.warn("⚠️ baseUrl chưa được định cấu hình. Sử dụng giá trị mặc định.");
   }
 }
 
+/**
+ * Lấy base URL hiện tại
+ */
 export function getBaseUrl() {
   return baseUrl;
 }
 
+/**
+ * Tạo instance axios chung
+ */
 const api = axios.create({
   baseURL: getBaseUrl() ?? "/",
+  responseType: "json",
   transitional: {
     silentJSONParsing: false
   },
-  responseType: "json"
-});
 
-const token = storeGetToken();
-if (token) api.defaults.headers.common["Authorization"] = `Bearer ${token}`;
+  // 👇 Tùy chỉnh serialize query params để gửi mảng đúng định dạng
+  paramsSerializer: (params) =>
+    qs.stringify(params, {
+      arrayFormat: "repeat", // => ?a=1&a=2
+      skipNulls: true // bỏ các giá trị null
+    })
+});
 
-// Interceptor tối ưu hóa
+/**
+ * Interceptor REQUEST
+ */
 api.interceptors.request.use((config) => {
+  const token = storeGetToken();
   const language = storeGetlanguage();
-  config.headers["Authorization"] = `Bearer ${token}`;
+
+  // 🔐 Thêm Authorization + ngôn ngữ
+  if (token) config.headers["Authorization"] = `Bearer ${token}`;
   if (language) config.headers["Accept-Language"] = language;
+
+  // ⚙️ Nếu query GET quá dài, tự động chuyển sang POST
+  if (config.method?.toUpperCase() === "GET" && config.params) {
+    const queryString = qs.stringify(config.params, { arrayFormat: "repeat" });
+
+    if (queryString.length > 2000) {
+      config.method = "POST";
+      config.data = config.params;
+      delete config.params;
+      console.warn("⚙️ Query quá dài → tự động chuyển sang POST:", config.url);
+    }
+  }
+
   return config;
 });
 
+/**
+ * Interceptor RESPONSE (có thể mở rộng sau này, ví dụ refresh token)
+ */
+api.interceptors.response.use(
+  (response) => response,
+  (error) => {
+    if (error.response?.status === 401) {
+      console.error("🚫 Token hết hạn hoặc không hợp lệ.");
+      // 👉 Có thể thêm xử lý refresh token ở đây sau này
+    }
+    return Promise.reject(error);
+  }
+);
+
 export default api;
 
 export const getDatasFromTable = async ({ tableName, page, pageSize, data }) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "trithuc-mvc-react",
-  "version": "3.4.2",
+  "version": "3.4.3",
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
@@ -22,6 +22,7 @@
     "lodash": "^4.17.21",
     "moment": "^2.30.1",
     "prop-types": "^15.8.1",
+    "qs": "^6.14.0",
     "yup": "^1.6.1"
   },
   "devDependencies": {
@@ -35,18 +36,18 @@
     "react-dom": "^18.3.1"
   },
   "peerDependencies": {
+    "@mui/icons-material": "^7.0.2",
     "@mui/lab": "^7.0.0-beta.11",
     "@mui/material": "^7.0.2",
     "@mui/system": "^5.17.1",
-    "@mui/icons-material": "^7.0.2",
-    "@mui/x-tree-view": "^7.28.1",
     "@mui/x-date-pickers": "^7.28.3",
+    "@mui/x-tree-view": "^7.28.1",
+    "dayjs": "^1.11.13",
     "material-ui-confirm": "^4.0.0",
     "react": ">=16",
     "react-dom": ">=16",
     "react-hook-form": "^7.55.0",
     "react-query": "^3.39.3",
-    "react-toastify": "^11.0.5",
-    "dayjs": "^1.11.13"
+    "react-toastify": "^11.0.5"
   }
 }