Files

dengyuxin deb005b88e 添加政府，银行大屏，修改政府前后端代码

2025-09-30 17:48:03 +08:00

17 KiB

Raw Blame History

API认证解决方案文档

1. 概述

本文档详细说明了如何解决https://ad.ningmuyun.com/bank/api/projects接口的认证问题（401 Unauthorized）和跨域资源共享（CORS）问题。文档提供了多种认证方案、实现示例和最佳实践，帮助开发者在实际项目中解决类似问题。

2. API认证的常见解决方案

2.1 基本认证（Basic Authentication）

基本认证是最简单的HTTP认证方式，通过在请求头中添加Base64编码的用户名和密码实现。

实现方式：

// 在请求头中添加认证信息
const username = 'your-username';
const password = 'your-password';
const credentials = btoa(`${username}:${password}`);

fetch(url, {
  headers: {
    'Authorization': `Basic ${credentials}`
  }
})

优点：实现简单，易于理解缺点：安全性较低，凭证可被解码，不适合生产环境

2.2 Bearer Token认证

Bearer Token是一种常用的令牌认证方式，通常在OAuth 2.0流程中使用，通过在请求头中添加Bearer [token]实现。

实现方式：

// 在请求头中添加Bearer Token
const token = 'your-access-token';

fetch(url, {
  headers: {
    'Authorization': `Bearer ${token}`
  }
})

优点：安全性较高，可设置过期时间，适合生产环境缺点：需要安全存储和管理token

2.3 OAuth 2.0认证

OAuth 2.0是一种开放标准的授权协议，提供多种授权流程（授权码、隐式、客户端凭证、资源所有者密码凭证）。

实现方式：根据具体授权流程实现，通常需要先获取授权码，再兑换访问令牌。

优点：安全性高，支持第三方授权，细粒度权限控制缺点：实现复杂，学习成本较高

2.4 API Key认证

API Key是一种简单的认证方式，通过在请求中添加特定的API密钥实现。

实现方式：

// 在URL参数中添加API Key
const apiKey = 'your-api-key';
fetch(`${url}?apiKey=${apiKey}`)

// 或在请求头中添加API Key
fetch(url, {
  headers: {
    'X-API-Key': apiKey
  }
})

优点：实现简单，适合内部服务调用缺点：密钥容易泄露，不适合复杂权限控制

3. Bearer Token认证实现示例

3.1 认证服务类实现

在src/utils/api-auth-guide.js文件中实现完整的认证服务类：

/**
 * API认证服务类，用于处理API请求的认证、授权和错误处理
 */
export class AuthService {
  constructor() {
    this.baseUrl = 'https://ad.ningmuyun.com/bank';
    this.tokenKey = 'auth_token';
    this.refreshTokenKey = 'refresh_token';
    this.tokenExpiryKey = 'token_expiry';
  }

  /**
   * 初始化认证服务
   */
  init() {
    // 检查token是否即将过期，如果是则自动刷新
    this.checkTokenExpiry();
  }

  /**
   * 检查用户是否已认证
   */
  isAuthenticated() {
    const token = localStorage.getItem(this.tokenKey);
    const expiry = localStorage.getItem(this.tokenExpiryKey);
    
    // 检查token是否存在且未过期
    if (!token || !expiry) {
      return false;
    }
    
    // 检查token是否即将在5分钟内过期
    const now = Date.now();
    const willExpireSoon = parseInt(expiry) - now < 5 * 60 * 1000;
    
    if (willExpireSoon) {
      // 后台刷新token
      this.refreshToken().catch(err => {
        console.error('自动刷新token失败:', err);
      });
    }
    
    return now < parseInt(expiry);
  }

  /**
   * 用户登录
   * @param {string} username - 用户名
   * @param {string} password - 密码
   * @returns {Promise} 登录结果
   */
  async login(username, password) {
    try {
      const response = await fetch(`${this.baseUrl}/api/login`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({ username, password })
      });

      if (!response.ok) {
        throw new Error(`登录失败: ${response.status}`);
      }

      const data = await response.json();
      
      // 存储token和过期时间
      if (data.token && data.refreshToken && data.expiresIn) {
        const expiryTime = Date.now() + data.expiresIn * 1000;
        localStorage.setItem(this.tokenKey, data.token);
        localStorage.setItem(this.refreshTokenKey, data.refreshToken);
        localStorage.setItem(this.tokenExpiryKey, expiryTime.toString());
        return true;
      }
      
      throw new Error('登录响应不包含有效token');
    } catch (error) {
      console.error('登录错误:', error);
      throw error;
    }
  }

  /**
   * 用户登出
   */
  logout() {
    localStorage.removeItem(this.tokenKey);
    localStorage.removeItem(this.refreshTokenKey);
    localStorage.removeItem(this.tokenExpiryKey);
  }

  /**
   * 刷新访问令牌
   * @returns {Promise} 刷新结果
   */
  async refreshToken() {
    try {
      const refreshToken = localStorage.getItem(this.refreshTokenKey);
      
      if (!refreshToken) {
        throw new Error('没有可用的刷新令牌');
      }

      const response = await fetch(`${this.baseUrl}/api/refresh-token`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({ refreshToken })
      });

      if (!response.ok) {
        throw new Error(`刷新token失败: ${response.status}`);
      }

      const data = await response.json();
      
      if (data.token && data.expiresIn) {
        const expiryTime = Date.now() + data.expiresIn * 1000;
        localStorage.setItem(this.tokenKey, data.token);
        if (data.refreshToken) {
          localStorage.setItem(this.refreshTokenKey, data.refreshToken);
        }
        localStorage.setItem(this.tokenExpiryKey, expiryTime.toString());
        return true;
      }
      
      throw new Error('刷新token响应不包含有效数据');
    } catch (error) {
      console.error('刷新token错误:', error);
      // 刷新失败时，清除所有认证信息
      this.logout();
      throw error;
    }
  }

  /**
   * 发送带认证的请求
   * @param {string} url - 请求URL
   * @param {object} options - fetch选项
   * @returns {Promise} 请求结果
   */
  async request(url, options = {}) {
    // 确保URL是完整的
    const fullUrl = url.startsWith('http') ? url : `${this.baseUrl}${url}`;
    
    // 确保options有默认值
    options = { ...options };
    options.headers = { ...options.headers };
    
    // 检查是否已认证
    if (!this.isAuthenticated()) {
      throw new Error('用户未认证，请先登录');
    }
    
    // 添加认证头
    const token = localStorage.getItem(this.tokenKey);
    options.headers['Authorization'] = `Bearer ${token}`;
    
    try {
      const response = await fetch(fullUrl, options);
      
      // 处理401错误，尝试刷新token后重试
      if (response.status === 401) {
        try {
          // 尝试刷新token
          await this.refreshToken();
          
          // 刷新成功后，使用新token重新请求
          options.headers['Authorization'] = `Bearer ${localStorage.getItem(this.tokenKey)}`;
          const retryResponse = await fetch(fullUrl, options);
          return this.handleResponse(retryResponse);
        } catch (refreshError) {
          // 刷新token失败，抛出原始401错误
          console.error('刷新token后重试失败:', refreshError);
          throw new Error('认证失败，请重新登录');
        }
      }
      
      return this.handleResponse(response);
    } catch (error) {
      console.error('API请求错误:', error);
      throw error;
    }
  }

  /**
   * 处理响应
   * @param {Response} response - fetch响应对象
   * @returns {Promise} 处理后的响应数据
   */
  async handleResponse(response) {
    if (!response.ok) {
      throw new Error(`请求失败: ${response.status} ${response.statusText}`);
    }
    
    try {
      return await response.json();
    } catch (e) {
      throw new Error('响应数据格式错误');
    }
  }

  /**
   * 检查token是否即将过期
   */
  checkTokenExpiry() {
    const checkInterval = setInterval(() => {
      if (!this.isAuthenticated()) {
        // token已过期或无效
        clearInterval(checkInterval);
        // 这里可以触发登录提示
        console.warn('认证已过期，请重新登录');
      }
    }, 60000); // 每分钟检查一次
  }
}

3.2 在组件中使用认证服务

在Home.vue组件中集成和使用认证服务：

// 导入认证服务
import { AuthService } from '../utils/api-auth-guide.js';

// 在组件中使用
export default {
  data() {
    return {
      // ...现有数据
      authService: null
    };
  },
  created() {
    // 初始化认证服务
    this.authService = new AuthService();
    this.authService.init();
    
    // 加载项目数据
    this.fetchProjectsData();
  },
  methods: {
    async fetchProjectsData() {
      try {
        // 检查是否已认证，未认证则尝试登录
        if (!this.authService.isAuthenticated()) {
          try {
            // 注意：实际项目中应该通过用户界面获取凭据，而不是硬编码
            await this.authService.login('admin', 'password');
          } catch (loginError) {
            console.error('登录失败:', loginError);
            // 登录失败时使用模拟数据
            this.setEnhancedMockProjectsData();
            return;
          }
        }
        
        // 使用认证服务调用API
        try {
          const data = await this.authService.request('https://ad.ningmuyun.com/bank/api/projects?page=1&limit=12&search=&status=');
          
          if (data.success && data.data && data.data.items) {
            console.log('成功获取API数据，共', data.data.items.length, '条项目');
            this.projectsData = data.data.items.map(project => ({
              id: project.id,
              name: project.name || '未知项目',
              status: project.status || 'pending',
              statusText: this.projectStatusMap[project.status] || '未知状态',
              amount: project.amount ? `${project.amount}万元` : '0万元',
              expiryDate: project.expiryDate || '暂无日期'
            }));
          } else {
            console.warn('API返回数据格式不符合预期，使用模拟数据...');
            this.setEnhancedMockProjectsData();
          }
        } catch (apiError) {
          console.error('API请求失败:', apiError);
          this.setEnhancedMockProjectsData();
        }
      } catch (error) {
        console.error('获取项目数据时发生异常:', error);
        this.setEnhancedMockProjectsData();
      }
    }
  }
};

4. CORS跨域问题的处理方案

4.1 了解CORS问题

跨域资源共享（CORS）是一种浏览器安全机制，用于限制Web页面从不同域请求资源。当http://localhost:5175（前端开发服务器）尝试访问https://ad.ningmuyun.com（API服务器）时，如果服务器没有正确配置CORS响应头，浏览器会阻止请求。

错误表现：

Access to fetch at 'https://ad.ningmuyun.com/bank/api/projects' from origin 'http://localhost:5175' has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header has a value that is not equal to the supplied origin.

4.2 解决方案

4.2.1 服务器端配置CORS

最佳方案是在API服务器端配置CORS，允许来自前端域名的请求：

Nginx配置示例：

location / {
    # 允许的源（可以是具体域名或*）
    add_header Access-Control-Allow-Origin 'http://localhost:5175' always;
    # 允许的请求头
    add_header Access-Control-Allow-Headers 'Authorization,Content-Type' always;
    # 允许的方法
    add_header Access-Control-Allow-Methods 'GET,POST,PUT,DELETE,OPTIONS' always;
    # 允许携带凭证
    add_header Access-Control-Allow-Credentials 'true' always;
    
    # 处理OPTIONS预检请求
    if ($request_method = 'OPTIONS') {
        return 204;
    }
    
    # 其他配置...
}

Express.js配置示例：

const express = require('express');
const cors = require('cors');
const app = express();

// 配置CORS
app.use(cors({
  origin: 'http://localhost:5175', // 允许的源
  methods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'], // 允许的方法
  allowedHeaders: ['Authorization', 'Content-Type'], // 允许的请求头
  credentials: true // 允许携带凭证
}));

// 其他路由和中间件...

4.2.2 使用代理服务器

在开发环境中，可以使用代理服务器转发API请求，绕过浏览器的CORS限制：

Vite配置示例（vite.config.js）：

import { defineConfig } from 'vite';

export default defineConfig({
  // ...其他配置
  server: {
    proxy: {
      '/api': {
        target: 'https://ad.ningmuyun.com/bank',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  }
});

配置后，前端可以将请求发送到/api/projects，Vite会自动将其代理到https://ad.ningmuyun.com/bank/projects。

4.2.3 使用Chrome扩展或命令行参数

在开发环境中，可以使用Chrome扩展（如Allow CORS: Access-Control-Allow-Origin）临时绕过CORS限制，或使用以下命令行参数启动Chrome：

chrome.exe --disable-web-security --user-data-dir="C:/ChromeDevSession"

注意：这仅适用于开发测试环境，生产环境中不应该使用。

4.2.4 使用fetch的credentials选项

在前端fetch请求中添加credentials选项，允许跨域请求携带凭证：

fetch(url, {
  credentials: 'include' // 发送跨域请求时携带凭证（如cookie、HTTP认证信息等）
})

5. 实际项目中的最佳实践

5.1 安全性考虑

不要在客户端存储敏感信息：避免在localStorage或cookie中存储明文密码等敏感信息
使用HTTPS：确保所有API请求都通过HTTPS加密传输，防止中间人攻击
token安全管理：
- 为token设置合理的过期时间
- 实现自动刷新token机制
- 在用户登出或检测到异常时及时清除token
避免硬编码凭证：不要在代码中硬编码用户名和密码，应通过安全的方式（如环境变量或用户输入）获取

5.2 错误处理

统一的错误处理机制：实现全局错误处理中间件，统一处理API请求错误
明确的错误信息：向用户提供清晰的错误提示，同时在控制台记录详细的错误信息
降级策略：在API不可用或认证失败时，提供适当的降级方案（如使用模拟数据）
重试机制：对于临时性错误（如网络波动），实现合理的重试逻辑

5.3 性能优化

缓存策略：对不经常变化的数据实施客户端缓存，减少API调用次数
懒加载和分页：对大量数据使用懒加载和分页，提高加载速度和用户体验
批量请求：将多个相关API请求合并为批处理请求，减少网络开销
监控和日志：添加API请求监控和日志记录，及时发现和解决性能问题

6. 临时解决方案（模拟数据）

在开发和测试过程中，如果API认证或CORS问题暂时无法解决，可以使用模拟数据作为临时替代方案：

// 增强版模拟数据生成函数
setEnhancedMockProjectsData() {
  // 生成模拟项目数据
  this.projectsData = [
    {
      id: 1,
      name: '宁夏银川肉牛养殖基地项目',
      status: 'active',
      statusText: '正常运行',
      amount: '1280万元',
      expiryDate: '2025-12-31'
    },
    {
      id: 2,
      name: '中卫市活体羊抵押融资项目',
      status: 'warning',
      statusText: '即将到期',
      amount: '850万元',
      expiryDate: '2024-06-15'
    },
    // ...更多模拟数据
  ];
}

注意：模拟数据仅适用于开发测试阶段，生产环境中应使用真实API。

7. 总结

解决API认证和CORS问题需要前后端协同工作：

选择合适的认证方案：根据项目需求选择Basic Auth、Bearer Token、OAuth 2.0或API Key
正确实现认证逻辑：使用安全的方式存储和管理认证凭证，实现自动刷新机制
配置服务器端CORS：在API服务器端正确配置CORS响应头，允许来自前端的请求
使用代理和开发工具：在开发环境中使用代理服务器或浏览器扩展绕过CORS限制
实现降级策略：在API不可用时提供模拟数据，确保应用仍能正常运行

通过以上措施，可以有效解决API认证和CORS问题，确保前后端通信的安全和稳定。

17 KiB Raw Blame History Unescape Escape

API认证解决方案文档

1. 概述

2. API认证的常见解决方案

2.1 基本认证（Basic Authentication）

2.2 Bearer Token认证

2.3 OAuth 2.0认证

2.4 API Key认证

3. Bearer Token认证实现示例

3.1 认证服务类实现

3.2 在组件中使用认证服务

4. CORS跨域问题的处理方案

4.1 了解CORS问题

4.2 解决方案

4.2.1 服务器端配置CORS

4.2.2 使用代理服务器

4.2.3 使用Chrome扩展或命令行参数

4.2.4 使用fetch的credentials选项

5. 实际项目中的最佳实践

5.1 安全性考虑

5.2 错误处理

5.3 性能优化

6. 临时解决方案（模拟数据）

7. 总结

17 KiB

Raw Blame History