增加用户登出功能

src/stores/AuthStore.js

@@ -1,19 +1,27 @@
 import { create } from 'zustand'
-import { devtools } from 'zustand/middleware'
-import { fetchJSON, postJSON } from '@/utils/request'
+import { fetchJSON } from '@/utils/request'
 
 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: {},
+  loginUser: {
+    userId: -1,
+    username: '',
+    avatarUrl: '',
+    mobile: '',
+    email: '',
+    openId: '',
+    accountList: [],
+    permissionList: [],
+  },
 
   loginStatus: 0,
 
   authenticate: async (authCode) => {
 
     const { saveUserSession, updateLoginStatus } = get()
-    
+
     updateLoginStatus(200)
 
     const json = await fetchJSON(`https://p9axztuwd7x8a7.mycht.cn/dingtalk/dingtalkwork/WhatsAppAuth`, { authCode })
@@ -44,26 +52,30 @@ const useAuthStore = create((set, get) => ({
     }))
   },
 
+  logout: () => {
+    window.sessionStorage.clear()
+    set(() => ({
+      loginUser: {
+        userId: -1,
+        username: '',
+        avatarUrl: '',
+        mobile: '',
+        email: '',
+        openId: '',
+        accountList: [],
+        permissionList: [],
+      }
+    }))
+
+  },
+
   loadUserSession: () => {
     const sessionData = window.sessionStorage.getItem('GLOBAL_SALES_LOGIN_USER')
-    let userData = {
-      userId: -1,
-      username: '',
-      avatarUrl: '',
-      mobile: '',
-      email: '',
-      openId: '',
-      accountList: [],
-      permissionList: [],
-    }
     if (sessionData !== null) {
-      userData = JSON.parse(sessionData)
+      set(() => ({
+        loginUser: JSON.parse(sessionData)
+      }))
     }
-    set(() => ({
-      loginUser: userData
-    }))
-
-    return userData
   },
 
   saveUserSession: () => {

src/views/AuthApp.jsx

@@ -1,18 +1,17 @@
-import { useEffect } from 'react';
-import { Outlet, Link, useHref, useNavigate, NavLink } from 'react-router-dom'
-import { Layout, Menu, ConfigProvider, theme, Empty, Row, Col, Avatar, Dropdown, Space, Typography, App as AntApp } from 'antd'
-import { DownOutlined } from '@ant-design/icons'
 import ErrorBoundary from '@/components/ErrorBoundary'
-import zhLocale from 'antd/locale/zh_CN'
-import { useThemeContext } from '@/stores/ThemeContext'
-import { useAuthContext } from '@/stores/AuthContext'
-import useConversationStore from '@/stores/ConversationStore'
 import useAuthStore from '@/stores/AuthStore'
+import useConversationStore from '@/stores/ConversationStore'
+import { useThemeContext } from '@/stores/ThemeContext'
+import { DownOutlined } from '@ant-design/icons'
+import { App as AntApp, Avatar, Col, ConfigProvider, Dropdown, Empty, Layout, Menu, Row, Space, Typography, theme } from 'antd'
+import zhLocale from 'antd/locale/zh_CN'
 import 'dayjs/locale/zh-cn'
+import { useEffect } from 'react'
+import { Link, NavLink, Outlet, useHref, useNavigate } from 'react-router-dom'
 
-import 'react-chat-elements/dist/main.css'
 import '@/assets/App.css'
 import AppLogo from '@/assets/logo-gh.png'
+import 'react-chat-elements/dist/main.css'
 
 const { Header, Footer, Content } = Layout
 const { Title } = Typography
@@ -112,9 +111,6 @@ function AuthApp() {
                   >
                     <a onClick={(e) => e.preventDefault()} style={{ color: colorPrimary }}>
                       <Space><Avatar
-                      style={{
-                        backgroundColor: colorPrimary,
-                      }}
                       src={loginUser.avatarUrl}>{loginUser?.username?.substring(1)}</Avatar>{loginUser.username}<DownOutlined />​</Space>
                     </a>
                   </Dropdown>

src/views/DingdingQRCode.jsx

@@ -1,8 +1,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'
+import { Flex, Result, Spin, Typography } from 'antd'
+import { useEffect } from 'react'
+import { useNavigate } from 'react-router-dom'
 
 const { Title } = Typography
 
@@ -12,11 +11,11 @@ function DingdingQRCode() {
 
   const navigate = useNavigate()
   
-  const { loginStatus, authenticate } = useAuthStore()
+  const { loginStatus, authenticate, logout, updateLoginStatus } = useAuthStore()
 
   useEffect (() => {
-    if (location.search === '?out') {  
-      window.sessionStorage.clear()
+    if (location.search === '?out') {
+      logout()
       navigate('/p/dingding/qrcode')
     }
   }, [])
@@ -63,7 +62,7 @@ function DingdingQRCode() {
       </Flex>
     )
   } else if (loginStatus === 302) {
-    navigate('/account/profile')
+    navigate('/')
   } else if (loginStatus === 403) {
     return (
       <Flex justify='center' align='center' gap='middle' vertical>

src/views/Standlone.jsx

@@ -1,18 +1,26 @@
-import { Outlet, Link, useHref, NavLink } from 'react-router-dom'
-import { useRef, useEffect, useState } from 'react'
-import { Layout, Menu, ConfigProvider, theme, Empty, Row, Col, Dropdown, Space, Typography, Result, App as AntApp } from 'antd'
-import { DownOutlined } from "@ant-design/icons";
 import '@/assets/App.css'
 import AppLogo from '@/assets/logo-gh.png'
+import useAuthStore from '@/stores/AuthStore'
 import { useThemeContext } from '@/stores/ThemeContext'
-import { isEmpty } from '@/utils/commons'
-
+import { App as AntApp, Col, ConfigProvider, Empty, Layout, Row, Typography, theme } from 'antd'
+import { NavLink, Outlet, useHref, useNavigate } from 'react-router-dom'
+import { useEffect } from 'react'
 const { Header, Footer, Content } = Layout
 const { Title } = Typography
 
 function Standlone() {
 
   const {colorPrimary, borderRadius} = useThemeContext()
+  const { loginUser } = useAuthStore()  
+  const navigate = useNavigate()
+  const href = useHref()
+
+  useEffect(() => {
+    // 除了路由 /p...以外都需要登陆系统
+    if (loginUser.userId > 0) {
+      navigate('/');
+    }
+	}, [href])
 
   const {
     token: { colorBgContainer },