Browse Source

feat:1. App.vue - 添加认证逻辑

  - 在 onMounted 中检测 URL 参数 token 和 source
  - 如果有 token,调用后端接口 /users/login 验证并获取用户信息
  - 设置用户状态后,使用 window.history.replaceState() 清除 URL 参数
  - 然后导航到 /chat 页面
  - 关键:使用 replaceState 而不是 push,避免改变浏览器历史记录

  2. ChatView.vue - 移除登录检查

  - 删除了同步的登录检查逻辑
  - 认证现在在 App.vue 中统一处理
zhangwl 2 months ago
parent
commit
b0f38524b3

+ 48 - 1
chat-ai-ui-main/src/App.vue

@@ -1,4 +1,51 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { onMounted } from 'vue';
+import { useRouter } from 'vue-router';
+import { useUserStore } from './stores/user';
+import axios from 'axios';
+
+const router = useRouter();
+const userStore = useUserStore();
+
+onMounted(async () => {
+  // 从 URL 中提取 token 和 source 参数
+  const params = new URLSearchParams(window.location.search);
+  const token = params.get('token');
+  const source = params.get('source');
+
+  // 如果有 token,说明是从第三方跳转过来
+  if (token) {
+    try {
+      // 调用后端接口验证 token 并获取用户信息
+      const { data } = await axios.post(
+        `${import.meta.env.VITE_API_URL}/users/login`,
+        { token, source },
+        { headers: { 'Content-Type': 'application/json' } }
+      );
+
+      // 设置用户状态
+      userStore.setUser({
+        userId: data.userId,
+        name: data.name,
+        refreshToken: data.refreshToken,
+      });
+
+      // 清除 URL 中的参数,然后导航到聊天页面
+      window.history.replaceState({}, '', '/chat');
+      router.push('/chat');
+    } catch (error) {
+      console.error('Token verification failed:', error);
+      router.push('/');
+    }
+  } else if (!userStore.userId) {
+    // 如果没有 token 且用户未登录,跳转到登录页
+    router.push('/');
+  } else {
+    // 用户已登录,跳转到聊天页面
+    router.push('/chat');
+  }
+});
+</script>
 
 
 <template>
 <template>
   <div>
   <div>

BIN
chat-ai-ui-main/src/assets/robot.png


+ 1 - 1
chat-ai-ui-main/src/components/Header.vue

@@ -67,7 +67,7 @@ const chatStore = useChatStore();
         </svg>
         </svg>
       </button>
       </button>
       <img :src="robotImage" alt="Chat AI" class="w-6 h-6 sm:w-8 sm:h-8 flex-shrink-0" />
       <img :src="robotImage" alt="Chat AI" class="w-6 h-6 sm:w-8 sm:h-8 flex-shrink-0" />
-      <h1 class="text-sm sm:text-lg font-semibold text-white truncate">AI智能问答系统</h1>
+      <h1 class="text-sm sm:text-lg font-semibold text-white truncate"></h1>
     </div>
     </div>
 
 
     <!-- 用户信息区域 -->
     <!-- 用户信息区域 -->