vue3+ts登录接口mock

在Vue3项目中使用TypeScript并模拟登录接口通常涉及到单元测试或API接口调试。Mock数据主要用于模拟真实的服务器响应，在本地开发环境中提供快速反馈，无需连接到实际的后端服务。

对于登录接口的Mock实现，你可以采用以下步骤：

1. 安装必要的库：首先安装`axios-mock-adapter`或`supertest`等库，用于拦截和替换axios请求，以及`@types/axios`和`@types/supertest`来支持TypeScript。

npm install axios-mock-adapter supertest @types/axios @types/supertest

2. 创建mock文件：创建一个`.mock.js`或`.mock.ts`文件，例如`login.mock.ts`。

import { createServer } from 'http';
import axios from 'axios';
import { RequestHandler } from 'express';

const mockLoginResponse = {
  data: { userId: 1, token: 'mockToken' },
  status: 200,
  headers: { 'Content-Type': 'application/json' },
};

const server = createServer((req, res) => {
  const handler: RequestHandler = (method: string, url: string) =>
    axios[method](url).then((response) => {
      res.status(response.status).json(response.data);
    });

  if (req.url === '/api/login') {
    handler('get', req.url).catch(() => res.status(401).send({ error: 'Invalid credentials' }));
  } else {
    res.status(404).send({ error: 'Not found' });
  }
});

server.listen(8080, () => console.log('Mock server started on port 8080'));

// 现在可以在你的测试代码里配置axios实例，如：
axios.defaults.adapter = require('axios-mock-adapter');
axios.get('/api/login').config({
  adapter: new axios.MockAdapter(),
}).then((response) => {
  // 测试登录成功处理
});

3. 在测试组件中使用：在Vue组件的测试文件中，设置axios的adapter为mock实例，并发起登录请求来验证组件的行为。