使用 Store 存取用户信息

src/main.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
-import { createBrowserRouter, RouterProvider } from 'react-router-dom';
+import { createBrowserRouter, RouterProvider } from 'react-router-dom'
 import { AuthContext } from '@/stores/AuthContext'
 import { ThemeContext } from '@/stores/ThemeContext'
 import AuthApp from '@/views/AuthApp'
@@ -12,6 +12,8 @@ import DingdingQRCode from '@/views/DingdingQRCode'
 import AccountProfile from '@/views/AccountProfile'
 import ErrorPage from '@/components/ErrorPage'
 import Conversations from '@/views/Conversations/ChatWindow'
+
+import useAuthStore from '@/stores/AuthStore'
 import '@/assets/index.css'
 
 const router = createBrowserRouter([
@@ -36,14 +38,14 @@ const router = createBrowserRouter([
       { path: 'dingding/qrcode', element: <DingdingQRCode /> },
     ],
   },
-]);
+])
+
+console.info(useAuthStore.getState().loadUserSession())
 
 ReactDOM.createRoot(document.getElementById('root')).render(
   // <React.StrictMode>
   <ThemeContext.Provider value={{ colorPrimary: '#1ba784', borderRadius: 4 }}>
-    <AuthContext.Provider value={{ loginUser: { userId: 354, username: '廖一军', accountList: [{OPI_Code:'LYJ'}, {OPI_Code:'LYJAH'}, {OPI_Code:'LYJGH'}] } }}>
       <RouterProvider router={router} fallbackElement={() => <div>Loading...</div>} />
-    </AuthContext.Provider>
   </ThemeContext.Provider>
   // </React.StrictMode>
 );

src/stores/AuthStore.js

@@ -6,8 +6,10 @@ const API_HOST = 'https://p9axztuwd7x8a7.mycht.cn/whatsapp_server'
 
 const useAuthStore = create((set, get) => ({
 
+  // GLOBAL_SALES_LOGIN_USER
+  // {"userId":"383","username":"廖一军","avatarUrl":"https://static-legacy.dingtalk.com/media/lALPBDDrhXr716HNAoDNAoA_640_640.png","mobile":"+86-18777396951","email":"lyj@hainatravel.com","openId":"iioljiPmZ4RPoOYpkFiSn7IKAiEiE","accountList":[{"OPI_SN":383,"OPI_Code":"LYJ","OPI_NameCN":"廖一军","OPI_DEI_SN":7,"OPI_NameEN":"Jimmy Liow"},{"OPI_SN":609,"OPI_Code":"LYJAH","OPI_NameCN":"廖一军（ah）","OPI_DEI_SN":28,"OPI_NameEN":"Jimmy Liow"}]}
   loginUser: {
-    // userId: '354',
+    userId: -1,
     // username: '廖一军',
     // avatarUrl: 'https://static-legacy.dingtalk.com/media/lALPBDDrhXr716HNAoDNAoA_640_640.png',
     // mobile: '86-18777396951',
@@ -54,7 +56,7 @@ const useAuthStore = create((set, get) => ({
     }
   },
 
-  loadUser: () => {
+  loadUserSession: () => {
     const sessionData = window.sessionStorage.getItem('GLOBAL_SALES_LOGIN_USER')
     let userData = {
       userId: 0,
@@ -68,6 +70,9 @@ const useAuthStore = create((set, get) => ({
     }
     if (sessionData !== null) {
       userData = JSON.parse(sessionData)
+      set(() => ({
+        loginUser: userData
+      }))
     }
 
     return userData

src/views/AccountProfile.jsx

@@ -2,12 +2,11 @@ import { useEffect } from 'react'
 import {
   Row, Col, Space, Descriptions, Avatar, Tag
 } from 'antd'
-import {
-  UserOutlined
-} from '@ant-design/icons'
+import { UserOutlined } from '@ant-design/icons'
 import useAuthStore from '@/stores/AuthStore'
 
 function AccountProfile() {
+
   const { loginUser } = useAuthStore()
 
   useEffect(() => {

src/views/AuthApp.jsx

@@ -22,30 +22,30 @@ function AuthApp() {
   const navigate = useNavigate()
 
   const { colorPrimary, borderRadius } = useThemeContext()
-  const { loadUser } = useAuthStore()
-
-  const loginUser = loadUser()
+  const { loginUser } = useAuthStore()
+  
+console.info(loginUser)
 
+  let userId = loginUser.userId
   const href = useHref()
 
   useEffect(() => {
     // 除了路由 /p...以外都需要登陆系统
-    if ((loginUser.userId === 0) && (href.indexOf('/p/') == -1)) {
+    if ((loginUser.userId === -1) && (href.indexOf('/p/') === -1)) {
       navigate('/p/dingding/qrcode');
     }
 	}, [href])
 
-  const userId = loginUser.userId
 
   useEffect(() => {
-    if (userId) {
+    if (loginUser.userId > 0) {
       useConversationStore.getState().connectWebsocket(userId);
       useConversationStore.getState().fetchInitialData(userId);
     }
     return () => {
       //useConversationStore.getState().disconnectWebsocket();
     }
-  }, [userId])
+  }, [])
 
   let defaultPath = 'follow'
 
@@ -118,7 +118,7 @@ function AuthApp() {
                       style={{
                         backgroundColor: colorPrimary,
                       }}
-                      src={loginUser.avatarUrl}>{loginUser.username.substring(1)}</Avatar>{loginUser.username}<DownOutlined />​</Space>
+                      src={loginUser.avatarUrl}>{loginUser?.username?.substring(1)}</Avatar>{loginUser.username}<DownOutlined />​</Space>
                     </a>
                   </Dropdown>
 

src/views/Conversations/Components/ConversationsList.jsx

@@ -16,8 +16,7 @@ const Conversations = () => {
   const { coli_guest_WhatsApp } = orderRow || {};
   const { order_sn } = useParams();
   const navigate = useNavigate();
-  const { loadUser } = useAuthStore();
-  const loginUser = loadUser();
+  const { loginUser } = useAuthStore();
   const { userId } = loginUser;
   const {
     initialState,

src/views/DingdingQRCode.jsx

@@ -2,6 +2,7 @@ import { Result, Spin, Flex, Typography } from 'antd'
 import React, { useEffect, useState } from 'react'
 import { useNavigate } from 'react-router-dom'
 import useAuthStore from '@/stores/AuthStore'
+import { fetchJSON } from '@/utils/request'
 
 const { Title } = Typography
 
@@ -10,9 +11,16 @@ const { Title } = Typography
 function DingdingQRCode() {
 
   const navigate = useNavigate()
-  // const { loginUser } = useAuthContext()  
+  
   const { loginStatus, fetchUser } = useAuthStore()
 
+  useEffect (() => {
+    if (location.search === '?out') {  
+      window.sessionStorage.clear()
+      navigate('/p/dingding/qrcode')
+    }
+  }, [])
+
   useEffect(() => {
     import('https://g.alicdn.com/dingding/h5-dingtalk-login/0.21.0/ddlogin.js').then(() => {
       window.DTFrameLogin(
@@ -32,8 +40,28 @@ function DingdingQRCode() {
         (loginResult) => {
           const { authCode } = loginResult
           fetchUser(authCode)
+          // setLoginStatus(200)
+
+          // fetchJSON(`https://p9axztuwd7x8a7.mycht.cn/dingtalk/dingtalkwork/WhatsAppAuth`, { authCode })
+          //   .then(json => {
+          //     if (json.errcode === 0) {
+          //       loginUser.userId = json.result.opisn
+          //       loginUser.accountName = json.result.opicode
+          //       loginUser.username = json.result.nick
+          //       loginUser.avatarUrl = json.result.avatarUrl
+          //       loginUser.mobile = '+' + json.result.stateCode + '-' + json.result.mobile
+          //       loginUser.email = json.result.email
+          //       loginUser.openId = json.result.openId
+          //       loginUser.accountList = json.result.accountlist
+          //       window.sessionStorage.setItem('GLOBAL_SALES_LOGIN_USER', JSON.stringify(loginUser))
+          //       setLoginStatus(302)
+          //     } else {
+          //       setLoginStatus(403)
+          //     }
+          //   })
         },
         (errorMsg) => {
+          // setLoginStatus(403)
           console.error(`Login Error: ${errorMsg}`)
         },
       )