feat: 增加钉钉authcode调试页面

hotfix/new-conversation
Jimmy Liow 11 months ago
parent c613522b3c
commit b20ee4c46b

@ -24,6 +24,7 @@ import Unassign from '@/views/ChatUnassign';
import ChatAssign from '@/views/Conversations/ChatAssign'; import ChatAssign from '@/views/Conversations/ChatAssign';
import DingdingLogin from '@/views/dingding/Login' import DingdingLogin from '@/views/dingding/Login'
import DingdingQRCode from '@/views/dingding/QRCode'
import useAuthStore from '@/stores/AuthStore' import useAuthStore from '@/stores/AuthStore'
import '@/assets/index.css' import '@/assets/index.css'
@ -80,10 +81,12 @@ const router = createBrowserRouter([
{ {
path: '/p', path: '/p',
element: <Standlone />, element: <Standlone />,
errorElement: <ErrorPage />,
children: [ children: [
{ path: 'dingding/login', element: <DingdingLogin /> }, { path: 'dingding/login', element: <DingdingLogin /> },
{ path: 'dingding/logout', element: <DingdingLogout /> }, { path: 'dingding/logout', element: <DingdingLogout /> },
{ path: 'dingding/callback', element: <DingdingCallback /> }, { path: 'dingding/callback', element: <DingdingCallback /> },
{ path: 'dingding/qr-code', element: <DingdingQRCode /> },
], ],
}, },
]); ]);

@ -1,6 +1,6 @@
import useAuthStore from '@/stores/AuthStore' import useAuthStore from '@/stores/AuthStore'
import { Flex, Result, Spin, Typography } from 'antd' import { Flex, Result, Spin, Typography } from 'antd'
import { useEffect } from 'react' import { useEffect, useState } from 'react'
import { useNavigate } from 'react-router-dom' import { useNavigate } from 'react-router-dom'
const { Title } = Typography const { Title } = Typography
@ -10,16 +10,18 @@ const { Title } = Typography
function QRCode() { function QRCode() {
const navigate = useNavigate() const navigate = useNavigate()
const loginStatus = useAuthStore((state) => state.loginStatus) const [result, setResult] = useState('')
const setLoginStatus = useAuthStore((state) => state.setLoginStatus)
const loginUser = useAuthStore((state) => state.loginUser) // const loginStatus = useAuthStore((state) => state.loginStatus)
const login = useAuthStore((state) => state.login) // const setLoginStatus = useAuthStore((state) => state.setLoginStatus)
// const loginUser = useAuthStore((state) => state.loginUser)
// const login = useAuthStore((state) => state.login)
useEffect(() => { useEffect(() => {
if (loginUser.userId > 0) { // if (loginUser.userId > 0) {
navigate('/') // navigate('/')
} // }
}, []) }, [])
useEffect(() => { useEffect(() => {
@ -40,49 +42,24 @@ function QRCode() {
}, },
(loginResult) => { (loginResult) => {
const { authCode } = loginResult const { authCode } = loginResult
login(authCode) // login(authCode)
setResult(authCode)
}, },
(errorMsg) => { (errorMsg) => {
setLoginStatus(403) // setLoginStatus(403)
console.error(`Login Error: ${errorMsg}`) console.error(`Login Error: ${errorMsg}`)
}, },
) )
}) })
}, []) }, [])
if (loginStatus === 200) { return (
return ( <Flex justify='center' align='center' gap='middle' vertical>
<Flex justify='center' align='center' gap='middle' vertical> <Title level={4}>使用钉钉扫码</Title>
<Result <div id='qrCodeContainer' style={{ border: '12px solid rgba(5, 5, 5, 0.06)', borderRadius: '8px' }}></div>
status='success' <span>钉钉 authCode: {result}</span>
title='扫码成功' </Flex>
subTitle='正在获取你的权限' )
extra={[
<Spin size='small' />
]}
/>
</Flex>
)
} else if (loginStatus === 302) {
navigate('/')
} else if (loginStatus === 403) {
return (
<Flex justify='center' align='center' gap='middle' vertical>
<Result
status='403'
title='403'
subTitle='你没有绑定钉钉账号,无法登陆。'
/>
</Flex>
)
} else {
return (
<Flex justify='center' align='center' gap='middle' vertical>
<Title level={4}>使用钉钉扫码</Title>
<div id='qrCodeContainer' style={{ border: '12px solid rgba(5, 5, 5, 0.06)', borderRadius: '8px' }}></div>
</Flex>
)
}
} }
export default QRCode export default QRCode
Loading…
Cancel
Save