使用 useContext 传递数据，不使用 Mobx 共享

src/main.jsx

@@ -5,8 +5,8 @@ import {
   createBrowserRouter,
   RouterProvider,
 } from 'react-router-dom'
-import RootStore from '@/stores/Root'
+import { AuthContext } from '@/stores/AuthContext'
-import { StoreContext } from '@/stores/StoreContext'
+import Auth from '@/stores/Auth'
 import App from '@/views/App'
 import Standlone from '@/views/Standlone'
 import OrderFollow from '@/views/OrderFollow'
@@ -49,21 +49,21 @@ const router = createBrowserRouter([
   {
     element: <Standlone />,
     children: [
-      { path: "/dingding/qrcode", element: <DingdingQRCode /> },
+      { path: '/dingding/qrcode', element: <DingdingQRCode /> },
-      { path: "/dingding/callback", element: <DingdingCallbak /> },
+      { path: '/dingding/callback', element: <DingdingCallbak /> },
     ]
   }
 ])
 
-const rootStore = new RootStore();
+const auth = new Auth();
 
 ReactDOM.createRoot(document.getElementById('root')).render(
   // <React.StrictMode>
-    <StoreContext.Provider value={rootStore}>
+    <AuthContext.Provider value={auth}>
       <RouterProvider
         router={router}
         fallbackElement={() => <div>Loading...</div>}
       />
-    </StoreContext.Provider>
+    </AuthContext.Provider>
   // </React.StrictMode>
 )

src/stores/Auth.js

@@ -1,24 +1,12 @@
-import { makeAutoObservable, runInAction } from 'mobx'
-
 const KEY_USER_ID = 'KEY_USER_ID'
 
 class Auth {
 
-  constructor(root) {
+  constructor() {
-    makeAutoObservable(this, { rootStore: false })
-    this.root = root
-    this.userId = root.getSession(KEY_USER_ID)
-  }
-
-  setup(userId) {
-    runInAction(() => {
-      this.userId = userId
-    })
-    this.root.putSession(KEY_USER_ID, userId)
   }
 
   // HT 账号 OP_SN
-  userId = null
+  userId = 1
 }
 
 export default Auth

src/stores/AuthContext.js

@@ -0,0 +1,7 @@
+import { createContext, useContext } from 'react'
+
+export const AuthContext = createContext(null)
+
+export function useAuth() {
+  return useContext(AuthContext)
+}

src/views/AccountProfile.jsx

@@ -1,25 +1,25 @@
-import { useNavigate } from 'react-router-dom'
+import { useEffect } from 'react'
-import { useRef, useEffect, useState } from 'react'
 import { observer } from 'mobx-react'
 import {
-  Row, Col, Divider, Table, Card, Button, Input,
+  Row, Col, Space, Descriptions, Avatar
-  Space, Segmented, Radio, Select, Descriptions, Spin, Typography, Flex, DatePicker, List, Avatar
 } from 'antd'
-import {
-  StarFilled, ZoomInOutlined, StarOutlined, BarsOutlined, AppstoreOutlined, SearchOutlined
-} from '@ant-design/icons'
-import { Conditional } from '@/components/Conditional'
 
-function AccountProfile() {
+import { useAuth } from '@/stores/AuthContext.js'
+
+function AccountProfile() {  
+  const auth = useAuth()
+  console.info('useAuth: ' + auth.userId)
 
   useEffect(() => {
+    // 测试错误捕获：
+    // throw new Error('💥 CABOOM 💥')  
   }, [])
 
   return (    
     <Row> 
       <Col span={12} offset={6}>
         <Descriptions title='个人信息' layout='vertical' column={2}>
-          <Descriptions.Item label='名字'>​骆梅玉​</Descriptions.Item>
+          <Descriptions.Item label='名字'><Space size='middle'><Avatar src={`https://api.dicebear.com/7.x/miniavs/svg?seed=${new Date().toString()}`} />​骆梅玉​</Space></Descriptions.Item>
           <Descriptions.Item label='手机'>+86-15878301602</Descriptions.Item>
           <Descriptions.Item label='邮件'>christyluo@hainatravel.com</Descriptions.Item>
           <Descriptions.Item label='部门'>海纳业务组-GH事业部群-GH销售</Descriptions.Item>

src/views/App.jsx

@@ -9,7 +9,6 @@ import 'dayjs/locale/zh-cn';
 
 import '@/assets/App.css'
 import AppLogo from '@/assets/logo-gh.png'
-import { useStore } from '@/stores/StoreContext.js'
 import { isEmpty } from '@/utils/commons'
 
 const { Header, Footer, Content } = Layout
@@ -18,9 +17,7 @@ const { Title } = Typography
 function App() {
 
   const href = useHref()
-  const { authStore } = useStore()
+  //const shouldBeLogin = (isEmpty(userId) || isEmpty(website)) && (href.indexOf('/authorise/') == -1)
-  const { userId, website } = authStore
-  const shouldBeLogin = (isEmpty(userId) || isEmpty(website)) && (href.indexOf('/authorise/') == -1)
   let defaultPath = 'follow'
 
   if (href !== '/') {

src/views/DingdingCallbak.jsx

@@ -1,40 +1,49 @@
 import React, { useEffect } from 'react'
-import { useParams, useNavigate } from "react-router-dom"
+import { useParams, useNavigate } from 'react-router-dom'
 import { Card, Typography, Flex, Result, Button } from 'antd'
 import { useRequest } from 'ahooks'
 
 const { Title } = Typography
 const { Meta } = Card
 
+import { useAuth } from '@/stores/AuthContext.js'
+
 function DingdingCallbak() {
 
+  const navigate = useNavigate()
   const params = new URLSearchParams(window.location.search)
   const code = params.get('code')
   const state = params.get('state')
 
   console.info('code: ' + code)
   console.info('state: ' + state)
-  const { data, error, loading } = useRequest(() => {
+  
-    return new Promise((resolve) => {
+  const auth = useAuth()
-      setTimeout(() => {
+  console.info('useAuth: ' + auth.userId)
-        resolve('use Request data...');
+
-      }, 1000);
+  auth.userId = 3344343
-    });
+
-  });
+  // const { data, error, loading } = useRequest(() => {
+  //   return new Promise((resolve) => {
+  //     setTimeout(() => {
+  //       resolve('use Request data...');
+  //     }, 1000);
+  //   });
+  // });
+  setTimeout(() => {
+    navigate('/s/account/profile')
+  }, 1000);
 
   useEffect(() => {
   }, [])
 
   return (
-    <Flex justify='center' align='center' gap="middle" vertical>
+    <Flex justify='center' align='center' gap='middle' vertical>
-      <p>{error}</p>
-      <p>{loading}</p>
-      <p>{data}</p>
     <Title level={4}>正在获取你的权限，请稍等</Title>
     <Result
-    status="403"
+    status='403'
-    title="403"
+    title='403'
-    subTitle="你没有绑定钉钉账号，无法登陆。"
+    subTitle='你没有绑定钉钉账号，无法登陆。'
   />
     </Flex>
   )

src/views/Standlone.jsx

@@ -28,20 +28,6 @@ const items = [
 	},
 ];
 function Standlone() {
-
-  const href = useHref()
-  const { authStore } = useStore()
-  const { userId, website } = authStore
-  const shouldBeLogin = (isEmpty(userId) || isEmpty(website)) && (href.indexOf('/authorise/') == -1)
-  let defaultPath = 'follow'
-
-  if (href !== '/') {
-    const splitPath = href.split('/')
-
-    if (splitPath.length > 1) {
-      defaultPath = splitPath[2]
-    }
-  }
   const {
     token: { colorBgContainer },
   } = theme.useToken()