接口联调

当我们拿到一个新的框架时，我们需要更换成自己的接口，这时候就需要接口联调了。

B站课程

欢迎观看Vben5入门课程👋，让我们一起开始这段学习之旅😊！

禁用默认接口服务

默认情况下，Vben5会自动启动接口服务，如果你不想使用默认接口服务，你可以禁用它。

修改文件apps/web-antd/.env.development

VITE_NITRO_MOCK

禁用后，需要重新启动项目,先Ctrl+C结束项目，再执行pnpm run dev:antd启动项目。

大家注意一下控制台输出

禁用前：

禁用前

禁用后：

禁用后

此时访问项目会报错，因为调用接口报错，所以需要自己配置接口。

项目会报错

配置新的接口服务

修改文件apps/web-antd/vite.config.mts

将原来的代理目标地址http://localhost:5320/api更换为自己的接口地址。这里用的是我自己的云端接口，大家可以替换成自己的接口地址。当然，如果想要作者一样的接口的话，可以去mldong-vben5open in new window下载mldong-course-boot.apifox.json并导入apifoxopen in new window中。

import { defineConfig } from '@vben/vite-config';

export default defineConfig(async () => {
  return {
    application: {},
    vite: {
      server: {
        proxy: {
          '/api': {
            changeOrigin: true,
            rewrite: (path) => path.replace(/^\/api/, ''),
            // mock代理目标地址
            target: 'https://apifox-plus.mldong.com/m1/3323228-2823297-default',
            ws: true,
          },
        },
      },
    },
  };
});

上述的apifox定义的mock接口已经定义有vben5默认的接口，所以更换接口后，不影响正常使用。

vben5接口

下面我们调整前端，已满足我们自己的接口规范。

接口规范说明

vben5标准返回体

{
    "code": 0,
    "data": {
        "id": 36,
        "realName": "之用律八放正",
        "roles": [
            "ea nulla"
        ],
        "username": "沈刚"
    },
    "error": null,
    "message": "proident ut"
}

code 状态码，0是正常
data 数据
error 错误消息
message 消息描述

我们自己的接口规范

{
    "code": 0,
    "msg": "花者南义",
    "data": {
    }
}

code 状态码，0是正常
data 数据
error 错误消息
message 消息描述

区别是没有error和message->msg

调整统一处理

调整统一请求token

这个是按需调整

调整统一请求token

调整统一返回

修改文件apps\web-antd\src\api\request.ts 100行message->msg

修改前：

修改后

修改后：

修改前

当然，也可以调整成这样，根据状态码进行不同的处理，这里全局处理token失效的场景。

  client.addResponseInterceptor(
    errorMessageResponseInterceptor((msg: string, _error) => {
      // 这里可以根据业务进行定制,你可以拿到 error 内的信息进行定制化处理，根据不同的 code 做不同的提示，而不是直接使用 message.error 提示 msg
      if (_error?.data?.code === 0) {
        message.error(msg);
      } else if (_error?.data.code === 99_990_403) {
        message.error('登录已过期，请重新登录');
        doReAuthenticate();
      } else {
        message.error(_error?.data?.msg);
      }
    }),
  );

统一响应体code/data

登录接口联调

旧接口

vben5默认接口

请求方法`POST`

请求参数

{
    "selectAccount": "vben",
    "username": "vben",
    "password": "123456",
    "captcha": true
}

{
    "code": 0,
    "data": {
        "id": 0,
        "password": "123456",
        "realName": "Vben",
        "roles": [
            "super"
        ],
        "username": "vben",
        "accessToken": "xxxx"
    },
    "error": null,
    "message": "ok"
}

新接口

根据自身后端的情况调整，这里只以上述apifox定义的mock为例。

请求方法`POST`

请求参数

{
    "userName": "superAdmin",
    "password": "123456"
}

{
  "code": 0,
  "msg": "成功",
  "data": {
    "token": "superAdmin640000201812148634",
    "refreshToken": "350000201707284520",
    "userId": "450000200712068856"
  }
}

简单对比了一下，主要修改为：

请求参数：username->userName
返回：accessToken->token

修改api文件

修改文件apps\web-antd\src\api\core\auth.ts

第7行修改入参字段username->userName

修改入参

第12行修改返回字段accessToken->token

返回字段

25行修改接口地址/auth/login->/sys/login

修改接口地址

修改登录表单

修改文件apps\web-antd\src\views\_core\authentication\login.vue

第61和68行username->userName

修改表单

修改返回

修改文件apps\web-antd\src\store\auth.ts

修改返回

第35行

const { accessToken } = await loginApi(params);

修改为

const { token: accessToken } = await loginApi(params);

使用admin/123456账号登录

账号登录

获取用户信息接口联调

旧接口

vben5默认接口

请求地址`/user/info`

请求方法`GET`

请求参数

{}

{
    "code": 0,
    "data": {
        "id": 0,
        "realName": "Vben",
        "roles": [
            "super"
        ],
        "username": "vben"
    },
    "error": null,
    "message": "ok"
}

新接口

根据自身后端的情况调整，这里只以上述apifox定义的mock为例。

请求地址`/sys/user/info`

请求方法`POST`

请求参数

{}

{
    "code": 0,
    "msg": "将存白切王接两",
    "data": {
        "id": "630000198309238476",
        "userName": "mkobct",
        "realName": "郝勇",
        "nickName": "杨娟",
        "avatar": "http://dummyimage.com/200x200",
        "mobilePhone": "13427134736",
        "tel": "18144352736",
        "email": "h.frhxo@nuv.gh",
        "adminType": 2,
        "sex": 3,
        "birthday": "1981-10-12",
        "isLocked": 1,
        "deptId": "21",
        "deptName": "状中般生去团",
        "postId": "3",
        "roleCodes": [
            "test",
            "demo"
        ],
        "roleIds": "2,3",
        "roleNames": [
            "孙涛",
            "姜艳"
        ],
        "lastLoginTime": "1982-02-23 08:32:08",
        "remark": "正保而联受前军只京很我办三系将律口地。她积何系科较验万真需得声育少。过同理之流见求节们认就角要龙则反响。",
        "ext": {
            "isPlayer": false
        }
    }
}

修改api文件

修改文件apps\web-antd\src\api\core\user.ts

第9行get->post 第9行

UserInfo类型是否要修改，根据自身项目情况，该修改并不是必须的。

用户信息的设置也在文件apps\web-antd\src\store\auth.ts上，可根据需要修改

获取权限码接口联调

默认情况下，获取权限码只在登录成功后调用。

旧接口

vben5默认接口

请求地址`/auth/codes`

请求方法`GET`

请求参数

{}

{
    "code": 0,
    "data": [
        "vwqqq",
        "cdscg",
        "vpbupqkcya"
    ],
    "error": null,
    "message": "incididunt occaecat minim velit"
}

新接口

根据自身后端的情况调整，这里只以上述apifox定义的mock为例。

请求地址`/sys/user/permCode`

请求方法`POST`

请求参数

{}

{
    "code": 0,
    "msg": "成功",
    "data": [
        "admin"
    ]
}

修改api文件

修改文件apps\web-antd\src\api\core\auth.ts

第50行get-> post和/auth/codes->/sys/user/permCode

修改api文件

退出登录接口联调

旧接口

vben5默认接口

请求地址`/auth/logout`

请求方法`POST`

请求参数

{}

{
    "code": 0,
    "data": "",
    "error": null,
    "message": "ok"
}

新接口

根据自身后端的情况调整，这里只以上述apifox定义的mock为例。

请求地址`/sys/logout`

请求方法`POST`

请求参数

{}

{
    "code": 0,
    "msg": "成功",
    "data": {}
}

修改api文件

修改文件apps\web-antd\src\api\core\auth.ts

第41行/auth/logout->/sys/logout

修改api文件