feat: 集成 PageSpy；统一用户信息读取

src/pageSpy/index.jsx

@@ -2,11 +2,15 @@ import { loadScript } from '@/utils/commons';
 import { PROJECT_NAME } from '@/config';
 
 export const loadPageSpy = (title) => {
+
+  if (window.$pageSpy) return
+
   const PageSpySrc = [
     'https://page-spy.mycht.cn/page-spy/index.min.js',
     'https://page-spy.mycht.cn/plugin/data-harbor/index.min.js',
     'https://page-spy.mycht.cn/plugin/rrweb/index.min.js',
   ];
+
   Promise.all(PageSpySrc.map((src) => loadScript(src))).then(() => {
     // 注册插件
     PageSpy.registerPlugin(new DataHarborPlugin({ maximum: 2 * 1024 * 1024 }));

src/stores/Auth.js

@@ -48,6 +48,13 @@ const initialState = {
   tokenTimeout: true,
   loginStatus: 0,
   defaltRoute: '',
+  currentUser: {
+    username: '',
+    realname: '',
+    rolesName: '',
+    emailAddress: '',
+    travelAgencyName: '',
+  },
   permissionList: []
 }
 
@@ -57,12 +64,29 @@ const useAuthStore = create(lifecycleware((set, get) => ({
 
   onAuth: async () => {
     const { startTokenInterval, loadUserPermission } = get()
-    const { userId, loginToken } = usingStorage()
+    const { setStorage, loginToken } = usingStorage()
 
     appendRequestParams('token', loginToken)
-    appendRequestParams('lmi_sn', userId)
-    await loadUserPermission(userId)
+    const userJson = await fetchUserDetail(loginToken)
+
+    appendRequestParams('lmi_sn', userJson.LMI_SN)
+
+    setStorage(KEY_USER_ID, userJson.LMI_SN)
+    setStorage(KEY_TRAVEL_AGENCY_ID, userJson.LMI_VEI_SN)
+
+    set(() => ({
+      currentUser: {
+        username: userJson.LoginName,
+        realname: userJson.real_name,
+        rolesName: userJson.roles_name,
+        emailAddress: userJson.LMI_listmail,
+        travelAgencyName: userJson.VName,
+      }
+    }))
+
+    await loadUserPermission(userJson.LMI_SN)
     startTokenInterval()
+    loadPageSpy(userJson.real_name)
   },
 
   authenticate: async (usr, pwd) => {
@@ -70,11 +94,8 @@ const useAuthStore = create(lifecycleware((set, get) => ({
     const { setStorage } = usingStorage()
 
     const { token: loginToken } = await fetchLoginToken(usr, pwd)
-    const userDetail = await fetchUserDetail(loginToken)
 
     setStorage(KEY_LOGIN_TOKEN, loginToken)
-    setStorage(KEY_USER_ID, userDetail.LMI_SN)
-    setStorage(KEY_TRAVEL_AGENCY_ID, userDetail.LMI_VEI_SN)
 
     await onAuth()
 

src/views/App.jsx

@@ -27,10 +27,9 @@ function App() {
   const { t, i18n } = useTranslation();
 
   const [password, setPassword] = useState('')
-  const [userDetail, setUserDetail] = useState({})
 
-  const [authenticate, tokenTimeout, isPermitted] = useAuthStore(
-    (state) => [state.authenticate, state.tokenTimeout, state.isPermitted])
+  const [authenticate, tokenTimeout, isPermitted, currentUser] = useAuthStore(
+    (state) => [state.authenticate, state.tokenTimeout, state.isPermitted, state.currentUser])
 
   const { loginToken } = usingStorage()
 
@@ -42,19 +41,6 @@ function App() {
   // 除了路由 /p...以外都需要登陆系统
   const needToLogin = href !== '/login' && isEmpty(loginToken)
 
-	useEffect(() => {
-    if (isNotEmpty(loginToken)) {
-      fetchUserDetail(loginToken)
-        .then(u => {
-          setUserDetail({
-            username: u.LoginName,
-            realname: u.real_name,
-            travelAgencyName: u.VName,
-          })
-        })
-      }
-  }, [loginToken])
-
 	useEffect(() => {
     if (needToLogin) {
       navigate('/login')
@@ -62,7 +48,7 @@ function App() {
 	}, [href])
 
   const onSubmit = () => {
-    authenticate(userDetail?.username, password)
+    authenticate(currentUser?.username, password)
       .catch(ex => {
         console.error(ex)
         alert(t('Validation.LoginFailed'))
@@ -109,7 +95,7 @@ function App() {
           <Input.Password value={password}
           onChange={(e) => setPassword(e.target.value)}
           onPressEnter={onSubmit}
-          addonBefore={userDetail?.username} />
+          addonBefore={currentUser?.username} />
         <Button
           onClick={onSubmit}
         >{t('Submit')}</Button></Space>
@@ -149,7 +135,7 @@ function App() {
 							</Col>
 							<Col span={4}>
 								<Title level={3} style={{ color: 'white', marginBottom: '0', display: 'flex', justifyContent: 'end' }}>
-									{userDetail?.travelAgencyName}
+									{currentUser?.travelAgencyName}
 								</Title>
 							</Col>
 							<Col span={2}>
@@ -169,7 +155,7 @@ function App() {
                   >
 									<a onClick={e => e.preventDefault()}>
 										<Space>
-											{userDetail?.realname}
+											{currentUser?.realname}
 											<DownOutlined />
 										</Space>
 									</a>

src/views/account/Profile.jsx

@@ -1,37 +1,21 @@
 import { useEffect, useState } from 'react'
 import { Descriptions, Col, Row } from 'antd';
 import { useTranslation } from 'react-i18next'
-import { fetchUserDetail } from '@/stores/Auth'
-import { usingStorage } from '@/hooks/usingStorage'
+import useAuthStore from '@/stores/Auth'
 
 function Profile() {
 
   const { t } = useTranslation()
-  const [userDetail, setUserDetail] = useState({})
-  const { loginToken } = usingStorage()
-
-  useEffect (() => {
-    fetchUserDetail(loginToken)
-      .then(json => {
-        setUserDetail({
-          username: json.LoginName,
-          realname: json.real_name,
-          rolesName: json.roles_name,
-          emailAddress: json.LMI_listmail,
-          travelAgencyName: json.VName,
-        })
-      })
-  }, [])
-
+  const currentUser = useAuthStore(state => state.currentUser)
 
   return (
     <Row>
       <Col span={12} offset={6}>
         <Descriptions title={t('userProfile')} layout="vertical" column={2}>
-          <Descriptions.Item label={t("Username")}>{userDetail?.username}</Descriptions.Item>
-          <Descriptions.Item label={t("Realname")}>{userDetail?.realname}({userDetail?.rolesName})</Descriptions.Item>
-          <Descriptions.Item label={t("Email")}>{userDetail?.emailAddress}</Descriptions.Item>
-          <Descriptions.Item label={t("Company")}>{userDetail?.travelAgencyName}</Descriptions.Item>
+          <Descriptions.Item label={t("Username")}>{currentUser?.username}</Descriptions.Item>
+          <Descriptions.Item label={t("Realname")}>{currentUser?.realname}({currentUser?.rolesName})</Descriptions.Item>
+          <Descriptions.Item label={t("Email")}>{currentUser?.emailAddress}</Descriptions.Item>
+          <Descriptions.Item label={t("Company")}>{currentUser?.travelAgencyName}</Descriptions.Item>
         </Descriptions>
       </Col>
     </Row>