142 lines
3.9 KiB
Vue
142 lines
3.9 KiB
Vue
<template>
|
||
<div class="dingtalk-callback-page">
|
||
<div class="loading-container">
|
||
<a-spin size="large" />
|
||
<p class="loading-text">{{ loadingText }}</p>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { onMounted, ref } from 'vue'
|
||
import { useRouter, useRoute } from 'vue-router'
|
||
import { useAuthStore } from '@/stores/auth'
|
||
import { message } from 'ant-design-vue'
|
||
import request from '@/utils/request'
|
||
import type { Result } from '@/api/types'
|
||
|
||
const router = useRouter()
|
||
const route = useRoute()
|
||
const authStore = useAuthStore()
|
||
|
||
const loadingText = ref('正在处理钉钉登录...')
|
||
|
||
const handleCallback = async () => {
|
||
try {
|
||
// 获取URL中的code参数
|
||
const code = route.query.code as string
|
||
const state = route.query.state as string
|
||
|
||
if (!code) {
|
||
message.error('缺少授权码，请重新登录')
|
||
router.push('/login')
|
||
return
|
||
}
|
||
|
||
loadingText.value = '正在验证登录信息...'
|
||
|
||
// 调用后端回调接口
|
||
// 使用request工具调用API
|
||
const result = await request.get<Result<any>>('/auth/dingtalk/callback', {
|
||
params: {
|
||
code,
|
||
...(state ? { state } : {})
|
||
}
|
||
})
|
||
|
||
if (result.code === 200 && result.data) {
|
||
// 登录成功，保存token和用户信息
|
||
const loginData = result.data
|
||
|
||
if (loginData.token) {
|
||
// 保存token
|
||
localStorage.setItem('token', loginData.token)
|
||
authStore.token = loginData.token
|
||
|
||
// 登录成功后获取用户信息
|
||
loadingText.value = '正在获取用户信息...'
|
||
try {
|
||
await authStore.fetchUserInfo()
|
||
} catch (error) {
|
||
console.error('获取用户信息失败:', error)
|
||
// 即使获取失败也不影响登录，使用基本信息
|
||
if (loginData.userId) {
|
||
const userInfoData = {
|
||
id: loginData.userId,
|
||
username: loginData.username || '',
|
||
realName: loginData.realName || '',
|
||
avatar: loginData.avatar || '',
|
||
email: '',
|
||
phone: '',
|
||
deptId: null,
|
||
deptName: '',
|
||
roles: loginData.roleIds ? loginData.roleIds.split(',') : [],
|
||
permissions: []
|
||
}
|
||
authStore.userInfo = userInfoData
|
||
localStorage.setItem('userInfo', JSON.stringify(userInfoData))
|
||
}
|
||
}
|
||
|
||
loadingText.value = '登录成功，正在跳转...'
|
||
message.success('登录成功')
|
||
|
||
// 延迟一下让用户看到成功提示
|
||
setTimeout(() => {
|
||
router.push('/')
|
||
}, 500)
|
||
} else {
|
||
message.error('登录失败：未获取到token')
|
||
router.push('/login')
|
||
}
|
||
} else if (result.code === 1901 && result.data?.needSelectDept) {
|
||
// 需要选择部门
|
||
loadingText.value = '需要选择部门...'
|
||
// 跳转到部门选择页面（或显示部门选择对话框）
|
||
// 这里可以根据实际情况处理
|
||
message.warning('首次登录需要选择部门')
|
||
router.push({
|
||
path: '/login',
|
||
query: {
|
||
needSelectDept: 'true',
|
||
userId: result.data.userId,
|
||
dingDepartments: result.data.dingDepartments
|
||
}
|
||
})
|
||
} else {
|
||
// 登录失败
|
||
message.error(result.message || '登录失败，请重试')
|
||
router.push('/login')
|
||
}
|
||
} catch (error: any) {
|
||
console.error('钉钉登录回调处理失败:', error)
|
||
message.error(error.message || '登录失败，请重试')
|
||
router.push('/login')
|
||
}
|
||
}
|
||
|
||
onMounted(() => {
|
||
handleCallback()
|
||
})
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.dingtalk-callback-page {
|
||
min-height: 100vh;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: $bg-primary;
|
||
}
|
||
|
||
.loading-container {
|
||
text-align: center;
|
||
}
|
||
|
||
.loading-text {
|
||
margin-top: 20px;
|
||
color: $text-secondary;
|
||
font-size: 16px;
|
||
}
|
||
</style>
|