添加钉钉登录回调页面：处理OAuth回调，保存token并跳转

frontend/src/router/index.ts

@@ -169,6 +169,15 @@ const routes: RouteRecordRaw[] = [
       layout: 'blank'
     }
   },
+  {
+    path: '/auth/dingtalk/callback',
+    name: 'DingTalkCallback',
+    component: () => import('@/views/DingTalkCallback.vue'),
+    meta: {
+      title: '钉钉登录回调',
+      layout: 'blank'
+    }
+  },
   {
     path: '/:pathMatch(.*)*',
     name: 'NotFound',
@@ -194,10 +203,10 @@ router.beforeEach(async (to, from, next) => {
   const authStore = useAuthStore()
   const token = localStorage.getItem('token')
   
-  // 如果访问登录页
-  if (to.path === '/login') {
-    // 如果已登录，跳转到首页
-    if (token && authStore.isLoggedIn) {
+  // 如果访问登录页或回调页，允许访问
+  if (to.path === '/login' || to.path === '/auth/dingtalk/callback') {
+    // 如果是登录页且已登录，跳转到首页
+    if (to.path === '/login' && token && authStore.isLoggedIn) {
       next('/')
       return
     }

frontend/src/views/DingTalkCallback.vue

@@ -0,0 +1,141 @@
+<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>