统一版本号、构建日期读取

HTTP增加自定义头：X-User-Id

src/config.js

@@ -9,4 +9,8 @@ export const OSS_URL_CN = 'https://haina-sale-system.oss-cn-shenzhen.aliyuncs.co
 export const OSS_URL_AP = 'https://hiana-crm.oss-ap-southeast-1.aliyuncs.com/WAMedia/';
 export const OSS_URL = OSS_URL_AP;
 
-export const WEB_VERSION = process.env.NODE_ENV === 'production' ? `__BUILD_VERSION__` : process.env.NODE_ENV;
+const __BUILD_VERSION__ = `__BUILD_VERSION__`.replace(/"/g, '')
+const __BUILD_DATE__ = `__BUILD_DATE__`;
+
+export const BUILD_VERSION = process.env.NODE_ENV === 'production' ? __BUILD_VERSION__ : process.env.NODE_ENV;
+export const BUILD_DATE = process.env.NODE_ENV === 'production' ? __BUILD_DATE__ : new Date().toLocaleString();

src/maintenance/index.jsx

@@ -1,4 +1,5 @@
 import { clearAllCaches } from '@/utils/commons';
+import { BUILD_VERSION, BUILD_DATE } from '@/config'
 
 const MaintenancePage = () => {
   const handleClearCache = async () => {
@@ -20,9 +21,6 @@ const MaintenancePage = () => {
     window.location.href = '/';
   };
 
-  const __BUILD_DATE__ = `__BUILD_DATE__`;
-  const __BUILD_VERSION__ = `__BUILD_VERSION__`;
-
   return (
     <>
       <div className='flex flex-col items-center justify-center h-5/6 bg-gray-100'>
@@ -39,8 +37,8 @@ const MaintenancePage = () => {
         <button onClick={toHome} className='px-4 py-2 mb-2 bg-red-400 text-white rounded-md border-0'>
           打开系统
         </button>
-        <p>Version: {__BUILD_VERSION__}</p>
-        <p>Build Date: {__BUILD_DATE__}</p>
+        <p>Version: {BUILD_VERSION}</p>
+        <p>Build Date: {BUILD_DATE}</p>
       </div>
     </>
   );

src/stores/AuthStore.js

@@ -1,5 +1,5 @@
 import { create } from 'zustand'
-import { fetchJSON } from '@/utils/request'
+import { fetchJSON, appendRequestHeader } from '@/utils/request'
 import { isEmpty, isNotEmpty } from '@/utils/commons'
 
 const useAuthStore = create((set, get) => ({
@@ -82,15 +82,19 @@ const useAuthStore = create((set, get) => ({
     }
 
     if (sessionData !== null) {
+      const sesstionObj = JSON.parse(sessionData)
       set(() => ({
-        loginUser: JSON.parse(sessionData)
+        loginUser: sesstionObj
       }))
+      
+      appendRequestHeader('X-User-Id', sesstionObj.userId)
     }
   },
 
   saveUserSession: () => {
     const { loginUser } = get()
     window.sessionStorage.setItem('GLOBAL_SALES_LOGIN_USER', JSON.stringify(loginUser))
+    appendRequestHeader('X-User-Id', loginUser.userId)
   },
 
   copyUserSession: () => {

src/utils/request.js

@@ -1,5 +1,22 @@
 
-import { WEB_VERSION } from '@/config'
+import { BUILD_VERSION } from '@/config'
+
+const customHeaders = []
+
+// 添加 HTTP Reuqest 自定义头部
+export function appendRequestHeader(n, v) {
+  customHeaders.push({
+    name: n,
+    value: v
+  })
+}
+
+function getRequestHeader() {
+  return customHeaders.reduce((acc, item) => {
+    acc[item.name] = item.value;
+    return acc;
+  }, {});
+}
 
 function checkStatus(response) {
   if (response.status >= 200 && response.status < 300) {
@@ -18,7 +35,7 @@ export function fetchText(url) {
   return fetch(url, {
     method: 'GET',
     headers: {
-      'X-Web-Version': WEB_VERSION
+      'X-Web-Version': BUILD_VERSION
     }
   }).then(checkStatus)
     .then(response => response.text())
@@ -30,10 +47,12 @@ export function fetchText(url) {
 export function fetchJSON(url, data) {
   const params = data ? new URLSearchParams(data).toString() : '';
   const ifp = url.includes('?') ? '&' : '?';
+  const headerObj = getRequestHeader()
   return fetch(`${url}${ifp}${params}`, {
     method: 'GET',
     headers: {
-      'X-Web-Version': WEB_VERSION
+      'X-Web-Version': BUILD_VERSION,
+      ...headerObj
     }
   }).then(checkStatus)
     .then(response => response.json())
@@ -47,7 +66,7 @@ export function postForm(url, data) {
     method: 'POST',
     body: data,
     headers: {
-      'X-Web-Version': WEB_VERSION
+      'X-Web-Version': BUILD_VERSION
     }
   }).then(checkStatus)
     .then(response => response.json())
@@ -62,7 +81,7 @@ export function postJSON(url, obj) {
     body: JSON.stringify(obj),
     headers: {
       'Content-type': 'application/json; charset=UTF-8',
-      'X-Web-Version': WEB_VERSION
+      'X-Web-Version': BUILD_VERSION
     }
   }).then(checkStatus)
     .then(response => response.json())
@@ -77,7 +96,7 @@ export function postStream(url, obj) {
     body: JSON.stringify(obj),
     headers: {
       'Content-type': 'application/octet-stream',
-      'X-Web-Version': WEB_VERSION
+      'X-Web-Version': BUILD_VERSION
     }
   }).then(checkStatus)
     .then(response => response.json())

src/views/DesktopApp.jsx

@@ -13,6 +13,8 @@ import 'react-chat-elements/dist/main.css'
 import ReloadPrompt from './ReloadPrompt';
 import ClearCache from './ClearCache';
 
+import { BUILD_VERSION, BUILD_DATE } from '@/config'
+
 const { Header, Footer, Content } = Layout
 const { Title } = Typography
 
@@ -61,9 +63,6 @@ function DesktopApp() {
     return () => clearInterval(interval);
   }, [totalNotify, isTitleVisible]);
 
-  const __BUILD_DATE__ = `__BUILD_DATE__`;
-  const __BUILD_VERSION__ = `__BUILD_VERSION__`;
-
   return (
     <Layout>
       <Header className='header' style={{ position: 'sticky', top: 0, zIndex: 2, width: '100%', background: 'white' }}>
@@ -141,7 +140,7 @@ function DesktopApp() {
           <Outlet />
         </Content>
       </Layout>
-      <Footer>桂林海纳国际旅行社有限公司 Version: {__BUILD_VERSION__}({__BUILD_DATE__})</Footer>
+      <Footer>桂林海纳国际旅行社有限公司 Version: {BUILD_VERSION}({BUILD_DATE})</Footer>
     </Layout>
   );
 }

src/views/MobileApp.jsx

@@ -3,12 +3,14 @@ import '@/assets/App.css';
 import AppLogo from '@/assets/highlights_travel_300_300.png';
 import { useThemeContext } from '@/stores/ThemeContext';
 import useAuthStore from '@/stores/AuthStore';
-import { Col, Layout, Row, Typography, theme, Space, Avatar, Dropdown, Flex } from 'antd';
+import { Layout, Typography, theme, Space, Avatar, Dropdown, Flex } from 'antd';
 import { DownOutlined } from '@ant-design/icons';
 import { NavLink, Outlet, Link } from 'react-router-dom';
 import ReloadPrompt from './ReloadPrompt';
 import ClearCache from './ClearCache';
 
+import { BUILD_VERSION } from '@/config';
+
 const { Header, Footer, Content } = Layout;
 const { Title } = Typography;
 
@@ -45,8 +47,6 @@ function MobileApp() {
     return () => window.removeEventListener('load', handleLoad);
   }, []);
 
-  const __BUILD_VERSION__ = `__BUILD_VERSION__`;
-
   return (
     <Layout>
       <Header className='header px-2' style={{ position: 'sticky', top: 0, zIndex: 1, width: '100%', background: 'white' }}>
@@ -65,7 +65,7 @@ function MobileApp() {
                 { type: 'divider' },
                 { label: <Link to='/p/dingding/logout'>退出</Link>, key: '3' },
                 { type: 'divider' },
-                { label: <>v{__BUILD_VERSION__}</>, key: 'clearcache' },
+                { label: <>v{BUILD_VERSION}</>, key: 'BUILD_VERSION' },
               ],
             }}
             trigger={['click']}>

src/views/ReloadPrompt.jsx

@@ -3,6 +3,8 @@ import { clearAllCaches } from '@/utils/commons';
 import { useRegisterSW } from 'virtual:pwa-register/react';
 // import { pwaInfo } from 'virtual:pwa-info';
 
+import { BUILD_VERSION, BUILD_DATE } from '@/config'
+
 // console.log(pwaInfo, 'pwaInfo');
 
 function ReloadPrompt({ force }) {
@@ -16,7 +18,7 @@ function ReloadPrompt({ force }) {
     onRegistered(r) {
       r &&
       setTimeout(() => {
-        console.log('Checking for sw update, onRegistered', `__BUILD_DATE__`, `__BUILD_VERSION__`);
+        console.log('Checking for sw update, onRegistered', BUILD_DATE, BUILD_VERSION);
         r.update();
 
         setInterval(() => {
@@ -27,7 +29,7 @@ function ReloadPrompt({ force }) {
     onRegisteredSW(swUrl, r) {
       r &&
       setTimeout(() => {
-        console.log('Checking for sw update, onRegisteredSW', `__BUILD_DATE__`, `__BUILD_VERSION__`);
+        console.log('Checking for sw update, onRegisteredSW', BUILD_DATE, BUILD_VERSION);
         r.update();
 
         setInterval(() => {