feat: sso在hash模式下存在问题，需要改进

src/pages/login/index.tsx

@@ -3,13 +3,14 @@ import './index.less'
 import {Button, Form, Input, Spin, Tabs} from "antd";
 import {TabsProps} from "antd/lib/tabs";
 import {Link} from "react-router-dom";
-import {LoginApis, LoginReq, SSOReq} from "../../api/user.ts";
-import {useEffect, useState} from "react";
+import {LoginApis, LoginReq } from "../../api/user.ts";
+import { useState} from "react";
 import {useAppDispatch} from "../../store";
 import {UserActions} from "../../store/slice/user.ts";
 import {Message} from "planning-tools";
 import {useNavigate } from "react-router";
 import {useQuery} from "../../utils";
+import {useSSOLogin} from "./sso.ts";
 
 const AccountPanel = ()=>{
 
@@ -59,11 +60,7 @@ const AccountPanel = ()=>{
 export const LoginPage = ()=>{
 
     const [activeKey,setActiveKey] = useState('account')
-    const ssoData = useQuery<SSOReq & {to?: string}>()
-    const [loading,setLoading] = useState(false)
-    const navigate = useNavigate()
-
-
+    const [loading] = useSSOLogin()
 
     const fetchSSO = ()=>{
         LoginApis.oauth2Url()
@@ -76,21 +73,6 @@ export const LoginPage = ()=>{
             })
     }
 
-    const onSSOCallback = (data: SSOReq)=>{
-        setLoading(true);
-        LoginApis.oauth2Callback(data)
-            .then(({data})=>{
-                if (data.code === 0){
-                    Message.success(data.msg);
-                    navigate(ssoData?.to || '/')
-                }else {
-                    Message.warning(data.msg)
-                }
-            })
-            .finally(()=>{
-                setLoading(false)
-            })
-    }
 
     const onActiveKeyChange = (ak: string)=>{
         if (ak === 'sso'){
@@ -101,12 +83,6 @@ export const LoginPage = ()=>{
         }
     }
 
-    useEffect(()=>{
-        if (ssoData?.code){
-            onSSOCallback(ssoData)
-        }
-        console.log('ssoData', ssoData)
-    },[ssoData])
 
     const tabItems:TabsProps["items"] = [
         {
@@ -126,4 +102,6 @@ export const LoginPage = ()=>{
             <Tabs activeKey={activeKey} onChange={onActiveKeyChange} items={tabItems}></Tabs>
         </div>
     </div>)
-}
+}
+
+

src/pages/login/sso.ts

@@ -0,0 +1,38 @@
+import {useQuery} from "../../utils";
+import {LoginApis, SSOReq} from "../../api/user.ts";
+import {useNavigate} from "react-router";
+import {useEffect, useState} from "react";
+import {Message} from "planning-tools";
+
+export const useSSOLogin = ()=>{
+  const ssoData = useQuery<SSOReq & {to?: string}>()
+  const navigate = useNavigate()
+  const [loading,setLoading] = useState(false)
+
+  const onSSOCallback = (data: SSOReq)=>{
+    setLoading(true);
+    LoginApis.oauth2Callback(data)
+      .then(({data})=>{
+        if (data.code === 0){
+          Message.success(data.msg);
+          navigate(ssoData?.to || '/')
+        }else {
+          Message.warning(data.msg)
+        }
+      })
+      .finally(()=>{
+        setLoading(false)
+      })
+  }
+
+
+  useEffect(()=>{
+    if (ssoData?.code){
+      onSSOCallback(ssoData)
+    }
+    console.log('ssoData', ssoData)
+  },[ssoData])
+
+  return [loading]
+
+}

src/utils/index.ts

@@ -14,24 +14,33 @@ export const getFirst = (item: string | null | Array<string | null>)=>{
 
 export function useQuery<T>  (){
     const [query,setQuery] = useState<T>()
-    
+
     const location = useLocation()
 
+  const parseQuery = ()=>{
+      console.log('location', location.search)
+    if (!location.search){
+      setQuery(undefined)
+      return
+    }
+    const query:querystring.ParsedQuery =  querystring.parse(location.search)
+    if (!query.code){
+      return;
+    }
+    const newQuery:any = {}
+    Object.keys(query).forEach(k=>{
+      newQuery[k] = getFirst(query[k])
+    })
+    setQuery(newQuery)
+  }
+
     useEffect(()=>{
-        if (!location.search){
-            setQuery(undefined)
-            return
-        }
-        const query:querystring.ParsedQuery =  querystring.parse(location.search)
-        if (!query.code){
-            return;
-        }
-        const newQuery:any = {}
-        Object.keys(query).forEach(k=>{
-            newQuery[k] = getFirst(query[k])
-        })
-        setQuery(newQuery)
+        parseQuery()
     },[location])
 
+  useEffect(()=>{
+    parseQuery()
+  },[])
+
     return query
-}
+}