feat: 实现多端飞书登录功能
1. 飞书客户端内:静默自动登录
- 检测飞书环境 (userAgent + ttjsBridge)
- 调用 ttjsBridge.getAuthCode() 获取授权码
- 自动登录到后台
2. 飞书客户端外:扫码登录
- 后端新增三个接口:
* POST /api/v1/auth/qrcode-login - 生成登录会话和二维码
* GET /api/v1/auth/qrcode-login/status - 轮询登录状态
* GET /login/qrcode/{id} - 飞书授权回调
- 前端新增 QRCodeLogin 组件:
* 使用 qrcode.react 生成二维码
* 每 2 秒轮询登录状态
* 状态:loading → pending → scanning → success/expired
3. 数据库表:feishu_login_session
- 存储 session_id, auth_url, status, user_id
- 状态:pending, scanning, success, expired
- 2 分钟过期机制
4. 其他优化
- 移除审批详情页的 header
- 更新 PROJECT_ISSUES.md 文档
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,187 @@
|
||||
import { useState, useEffect, useRef } from 'react'
|
||||
import { Dialog } from 'antd-mobile'
|
||||
import { QRCodeSVG } from 'qrcode.react'
|
||||
import { useNavigate } from 'react-router-dom'
|
||||
import Toast from 'antd-mobile'
|
||||
import styles from './QRCodeLogin.module.css'
|
||||
|
||||
interface QRCodeLoginProps {
|
||||
visible: boolean
|
||||
onClose: () => void
|
||||
}
|
||||
|
||||
export default function QRCodeLogin({ visible, onClose }: QRCodeLoginProps) {
|
||||
const navigate = useNavigate()
|
||||
const [qrcodeUrl, setQrcodeUrl] = useState('')
|
||||
const [sessionId, setSessionId] = useState('')
|
||||
const [status, setStatus] = useState<'loading' | 'pending' | 'scanning' | 'success' | 'expired'>('loading')
|
||||
const pollTimerRef = useRef<NodeJS.Timeout | null>(null)
|
||||
|
||||
useEffect(() => {
|
||||
if (visible) {
|
||||
initQrcodeLogin()
|
||||
}
|
||||
|
||||
return () => {
|
||||
if (pollTimerRef.current) {
|
||||
clearTimeout(pollTimerRef.current)
|
||||
}
|
||||
}
|
||||
}, [visible])
|
||||
|
||||
const initQrcodeLogin = async () => {
|
||||
setStatus('loading')
|
||||
try {
|
||||
// 生成登录二维码
|
||||
const response = await fetch('/api/v1/auth/qrcode-login', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
tenant_key: '14e7bc0fe5985740',
|
||||
}),
|
||||
})
|
||||
|
||||
const result = await response.json()
|
||||
|
||||
if (result.code === 0) {
|
||||
setQrcodeUrl(result.data.auth_url)
|
||||
setSessionId(result.data.session_id)
|
||||
setStatus('pending')
|
||||
// 开始轮询登录状态
|
||||
startPolling(result.data.session_id)
|
||||
} else {
|
||||
Toast.show(result.message || '生成二维码失败')
|
||||
setStatus('expired')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('生成二维码失败:', error)
|
||||
Toast.show('生成二维码失败')
|
||||
setStatus('expired')
|
||||
}
|
||||
}
|
||||
|
||||
const startPolling = (id: string) => {
|
||||
const poll = async () => {
|
||||
try {
|
||||
const response = await fetch(`/api/v1/auth/qrcode-login/status?session_id=${id}`)
|
||||
const result = await response.json()
|
||||
|
||||
if (result.code === 0) {
|
||||
if (result.data.status === 'success') {
|
||||
setStatus('success')
|
||||
// 登录成功,保存 token
|
||||
const { token, user } = result.data
|
||||
localStorage.setItem('token', token)
|
||||
localStorage.setItem('i18nextLng', 'zh')
|
||||
// 触发登录成功事件,让 store 更新
|
||||
window.dispatchEvent(new CustomEvent('feishu-login-success', { detail: { user, token }))
|
||||
|
||||
Toast.show('登录成功')
|
||||
setTimeout(() => {
|
||||
onClose()
|
||||
navigate('/dashboard')
|
||||
}, 500)
|
||||
} else if (result.data.status === 'expired') {
|
||||
setStatus('expired')
|
||||
Toast.show('二维码已过期,请刷新重试')
|
||||
} else if (result.data.status === 'scanning') {
|
||||
setStatus('scanning')
|
||||
// 继续轮询
|
||||
pollTimerRef.current = setTimeout(poll, 2000)
|
||||
} else {
|
||||
// pending,继续轮询
|
||||
pollTimerRef.current = setTimeout(poll, 2000)
|
||||
}
|
||||
} else if (result.message?.includes('过期')) {
|
||||
setStatus('expired')
|
||||
} else {
|
||||
// 继续轮询
|
||||
pollTimerRef.current = setTimeout(poll, 2000)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('轮询登录状态失败:', error)
|
||||
// 继续轮询
|
||||
pollTimerRef.current = setTimeout(poll, 2000)
|
||||
}
|
||||
}
|
||||
|
||||
pollTimerRef.current = setTimeout(poll, 2000)
|
||||
}
|
||||
|
||||
const getStatusText = () => {
|
||||
switch (status) {
|
||||
case 'loading':
|
||||
return '正在生成二维码...'
|
||||
case 'pending':
|
||||
return '请使用飞书扫码登录'
|
||||
case 'scanning':
|
||||
return '已扫码,请在手机上确认'
|
||||
case 'success':
|
||||
return '登录成功!'
|
||||
case 'expired':
|
||||
return '二维码已过期'
|
||||
default:
|
||||
return ''
|
||||
}
|
||||
}
|
||||
|
||||
const getStatusColor = () => {
|
||||
switch (status) {
|
||||
case 'pending':
|
||||
return '#1677ff'
|
||||
case 'scanning':
|
||||
return '#faad14'
|
||||
case 'success':
|
||||
return '#52c41a'
|
||||
case 'expired':
|
||||
return '#ff4d4f'
|
||||
default:
|
||||
return '#999'
|
||||
}
|
||||
}
|
||||
|
||||
const handleRefresh = () => {
|
||||
if (pollTimerRef.current) {
|
||||
clearTimeout(pollTimerRef.current)
|
||||
}
|
||||
initQrcodeLogin()
|
||||
}
|
||||
|
||||
return (
|
||||
<Dialog
|
||||
visible={visible}
|
||||
content={
|
||||
<div className={styles.qrcodeContainer}>
|
||||
{status === 'loading' && <div className={styles.loading}>正在生成二维码...</div>}
|
||||
|
||||
{qrcodeUrl && status !== 'loading' && (
|
||||
<>
|
||||
<div className={styles.qrcode}>
|
||||
<QRCodeSVG
|
||||
value={qrcodeUrl}
|
||||
size={200}
|
||||
level="M"
|
||||
includeMargin={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className={styles.status} style={{ color: getStatusColor() }}>
|
||||
{getStatusText()}
|
||||
</div>
|
||||
|
||||
{(status === 'expired') && (
|
||||
<div className={styles.actions}>
|
||||
<button className={styles.refreshBtn} onClick={handleRefresh}>
|
||||
刷新二维码
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
}
|
||||
onClose={onClose}
|
||||
closeOnMaskClick={status !== 'scanning' && status !== 'success'}
|
||||
/>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user