From ab43fa2457bac0e45fdad43fc97be29e2122afdd Mon Sep 17 00:00:00 2001
From: Joshi <3040996759@qq.com>
Date: Thu, 11 Jun 2026 14:32:28 +0800
Subject: [PATCH] =?UTF-8?q?feat(auth):=20=E5=AE=9E=E7=8E=B0=E8=87=AA?=
 =?UTF-8?q?=E5=8A=A8=E7=99=BB=E5=BD=95=E5=8A=9F=E8=83=BD=E5=B9=B6=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96API=E8=AF=B7=E6=B1=82=E9=85=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 在App.vue中添加onMounted钩子自动执行autoLogin函数
- 新增auth.js工具模块实现自动登录逻辑
- 配置API请求优先从localStorage获取Token
- 添加对localStorage和Cookie中Token的兼容性处理
- 集成echarts-china-map依赖包
- 移除测试用硬编码Token和调试日志
- 统一API基础路径为/api
- 添加Docker部署配置文件和nginx反向代理设置
---
 .dockerignore        | 11 +++++++++
 Dockerfile           | 16 +++++++++++++
 nginx.conf           | 20 ++++++++++++++++
 package.json         |  1 +
 src/App.vue          |  6 +++++
 src/api/request.js   | 26 ++++++++------------
 src/utils/auth.js    | 57 ++++++++++++++++++++++++++++++++++++++++++++
 src/utils/request.js | 26 ++++++++------------
 8 files changed, 131 insertions(+), 32 deletions(-)
 create mode 100644 .dockerignore
 create mode 100644 Dockerfile
 create mode 100644 nginx.conf
 create mode 100644 src/utils/auth.js

diff --git a/.dockerignore b/.dockerignore
new file mode 100644
index 0000000..aeb2738
--- /dev/null
+++ b/.dockerignore
@@ -0,0 +1,11 @@
+node_modules
+.git
+.gitignore
+.idea
+*.md
+deploy.sh
+.env
+src
+public
+scripts
+node_modules
diff --git a/Dockerfile b/Dockerfile
new file mode 100644
index 0000000..038d1ca
--- /dev/null
+++ b/Dockerfile
@@ -0,0 +1,16 @@
+# ============================================
+# Docker 部署 - 数据大屏管理系统
+# 使用 Nginx 托管前端 + 反向代理 API
+# ============================================
+
+FROM nginx:alpine
+
+# 将构建好的前端静态文件复制到 Nginx
+COPY dist/ /usr/share/nginx/html/
+
+# 替换 Nginx 配置
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+
+EXPOSE 18800
+
+CMD ["nginx", "-g", "daemon off;"]
diff --git a/nginx.conf b/nginx.conf
new file mode 100644
index 0000000..c74da9b
--- /dev/null
+++ b/nginx.conf
@@ -0,0 +1,20 @@
+server {
+    listen       18800;
+    server_name  localhost;
+
+    # 前端静态文件
+    location / {
+        root   /usr/share/nginx/html;
+        index  index.html;
+        try_files $uri $uri/ /index.html;  # Vue Router 历史模式支持
+    }
+
+    # API 反向代理到真实后端
+    location /api/ {
+        proxy_pass http://140.143.206.120/prod-api/;
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header X-Forwarded-Proto $scheme;
+    }
+}
diff --git a/package.json b/package.json
index ec837d9..2494045 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
     "axios": "^1.6.7",
     "cors": "^2.8.6",
     "echarts": "^5.6.0",
+    "echarts-china-map": "^1.0.4",
     "element-plus": "^2.6.1",
     "express": "^5.2.1",
     "mysql2": "^3.22.3",
diff --git a/src/App.vue b/src/App.vue
index b9e2ce7..8b8ff88 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -3,6 +3,12 @@
 </template>
 
 <script setup>
+import { onMounted } from 'vue'
+import { autoLogin } from '@/utils/auth'
+
+onMounted(() => {
+  autoLogin()
+})
 </script>
 
 <style scoped>
diff --git a/src/api/request.js b/src/api/request.js
index 8b252a0..8e85da7 100644
--- a/src/api/request.js
+++ b/src/api/request.js
@@ -1,6 +1,6 @@
 import axios from 'axios'
 
-const baseURL = process.env.VUE_APP_API_BASE_URL || '/api'
+const baseURL = '/api'
 
 const service = axios.create({
   baseURL,
@@ -10,31 +10,27 @@ const service = axios.create({
   }
 })
 
-// 从 Cookies 获取 Token（与 klp-ui 保持一致）
+// Token 获取顺序：localStorage（自动登录） > Cookie（主系统登录）
 const getToken = () => {
+  // 1. 优先取自动登录存的 token
+  const localToken = localStorage.getItem('Admin-Token')
+  if (localToken) return localToken
+
+  // 2. 其次从 Cookie 取（主系统登录）
   const name = 'Admin-Token'
   const value = `; ${document.cookie}`
   const parts = value.split(`; ${name}=`)
   if (parts.length === 2) return parts.pop().split(';').shift()
+
   return null
 }
 
 service.interceptors.request.use(
   config => {
-    let token = getToken()
-    // ========== 测试用：临时硬编码 Token ==========
-    // 如果没有从 Cookies 获取到 Token，使用测试 Token
-    if (!token) {
-      token = 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJsb2dpblR5cGUiOiJsb2dpbiIsImxvZ2luSWQiOiJzeXNfdXNlcjoxIiwicm5TdHIiOiJGM2w5Nm5ncGV4ZDA4d1BUYWlvVmFreWhCUDdlc2gyeCIsInVzZXJJZCI6MX0.aP06S-5aJtukzMjmYW3d5zK3v10TOKcdNpROniv5lr8'
-    }
-    // ========== 测试用结束 ==========
-
-    console.log('请求URL:', config.url)
-    console.log('使用的Token:', token ? '已设置' : '未设置')
+    const token = getToken()
 
     if (token) {
-      // 尝试两种格式：Bearer 和 直接使用Token
-      config.headers['Authorization'] = token // 直接使用Token（不带Bearer前缀）
+      config.headers['Authorization'] = token
     }
     return config
   },
@@ -45,8 +41,6 @@ service.interceptors.request.use(
 
 service.interceptors.response.use(
   response => {
-    console.log('响应数据:', response.data)
-
     let res = response.data
 
     // 如果响应数据为空
diff --git a/src/utils/auth.js b/src/utils/auth.js
new file mode 100644
index 0000000..92df9c1
--- /dev/null
+++ b/src/utils/auth.js
@@ -0,0 +1,57 @@
+/**
+ * 自动登录模块
+ * 应用启动时用账号密码获取 Token，存到 localStorage
+ * 后续所有 API 请求从 localStorage 取 Token
+ */
+
+const LOGIN_URL = '/api/login'
+const STORAGE_KEY = 'Admin-Token'
+
+/**
+ * 调用登录接口获取 Token
+ */
+export async function autoLogin() {
+  // 如果已有 Token，跳过
+  const existing = localStorage.getItem(STORAGE_KEY)
+  if (existing) {
+    console.log('[Auth] 已有 Token，跳过自动登录')
+    return existing
+  }
+
+  console.log('[Auth] 正在自动登录获取 Token...')
+
+  try {
+    const response = await fetch(LOGIN_URL, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        username: 'admin',
+        password: 'FAD888888'
+      })
+    })
+
+    const data = await response.json()
+
+    // 兼容多种返回格式
+    const token = data.token || data.data?.token || data.data
+
+    if (token) {
+      localStorage.setItem(STORAGE_KEY, token)
+      console.log('[Auth] Token 获取成功')
+      return token
+    } else {
+      console.warn('[Auth] 登录接口返回中未找到 token:', data)
+      return null
+    }
+  } catch (err) {
+    console.error('[Auth] 自动登录失败:', err.message)
+    return null
+  }
+}
+
+/**
+ * 清除 Token（登出时调用）
+ */
+export function clearToken() {
+  localStorage.removeItem(STORAGE_KEY)
+}
diff --git a/src/utils/request.js b/src/utils/request.js
index 820692a..dd99328 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -1,39 +1,33 @@
 import axios from 'axios'
 
-// klp-oa线上API地址（测试环境）
-const baseURL = 'http://140.143.206.120:8080'
+// 走 Nginx 代理，同域名请求
+const baseURL = '/api'
 
 const service = axios.create({
   baseURL: baseURL,
   timeout: 30000
 })
 
-// 从 Cookies 获取 Token（与 klp-ui 保持一致）
+// Token 获取顺序：localStorage（自动登录） > Cookie（主系统登录）
 const getToken = () => {
+  // 1. 优先取自动登录存的 token
+  const localToken = localStorage.getItem('Admin-Token')
+  if (localToken) return localToken
+
+  // 2. 其次从 Cookie 取（主系统登录）
   const name = 'Admin-Token'
   const value = `; ${document.cookie}`
   const parts = value.split(`; ${name}=`)
   if (parts.length === 2) return parts.pop().split(';').shift()
+
   return null
 }
 
 service.interceptors.request.use(
   config => {
-    // 携带Token
-    let token = getToken()
-
-    // ========== 测试用：临时硬编码 Token ==========
-    // 如果没有从 Cookies 获取到 Token，使用测试 Token
-    if (!token) {
-      token = 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJsb2dpblR5cGUiOiJsb2dpbiIsImxvZ2luSWQiOiJzeXNfdXNlcjoxIiwicm5TdHIiOiJGM2w5Nm5ncGV4ZDA4d1BUYWlvVmFreWhCUDdlc2gyeCIsInVzZXJJZCI6MX0.aP06S-5aJtukzMjmYW3d5zK3v10TOKcdNpROniv5lr8'
-    }
-    // ========== 测试用结束 ==========
-
-    console.log('请求URL:', config.url)
-    console.log('使用的Token:', token ? '已设置' : '未设置')
+    const token = getToken()
 
     if (token) {
-      // 直接使用Token（不带Bearer前缀）
       config.headers['Authorization'] = "Bearer " + token
     }
     return config