7.1 KiB
7.1 KiB
2.7 第一个接口调试
:::tip 概述 本章通过实际操作,带您完成第一个 API 接口的调试,从登录获取 Token 到调用业务接口。所有请求参数与响应字段均以本项目实际接口为准。 :::
调试工具
推荐使用以下工具进行 API 调试:
- ApiFox:图形化 API 调试工具(https://apifox.com/)
- curl:命令行工具(系统自带)
- 浏览器开发者工具:F12 → Network 面板
步骤一:获取验证码
# GET 请求获取验证码(返回 Base64 编码的图片 + 验证码 key)
curl http://admin.laravel13.naivevue/api/captcha
响应示例:
{
"code": 0,
"ok": true,
"msg": "操作成功",
"data": {
"key": "5c62cae9-3bdb-4356-bc4a-c4c61b7c3bea",
"captcha": "data:image/png;base64,iVBORw0KGgoAAAANSUh..."
}
}
将 key 保存备用,captcha 是 Base64 编码的验证码图片(肉眼读取图片上的字符)。
:::tip
验证码存储在 Redis 中,有效期 CAPTCHA_EXPIRE(默认 300 秒),超过有效期需重新获取。接口同时验证了 PHP → Redis 链路,此步失败优先排查 Redis(见 2.9 常见问题 FAQ)。
:::
步骤二:登录获取 Token
# -----------------------------------------------------------------------------
# 登录接口(POST + JSON)
# -----------------------------------------------------------------------------
# -X POST → 使用 POST 方法
# -H "Content-Type: ..." → 告诉服务器请求体是 JSON 格式
# -d '{...}' → 发送 JSON 请求体
# username → 用户名
# password → 密码
# key → 步骤一返回的验证码 key(与 captcha 响应字段命名一致)
# code → 验证码图片上显示的字符
curl -X POST http://admin.laravel13.naivevue/api/login \
-H "Content-Type: application/json" \
-d '{
"username": "admin",
"password": "123456",
"key": "5c62cae9-3bdb-4356-bc4a-c4c61b7c3bea",
"code": "1234"
}'
响应示例:
{
"code": 0,
"ok": true,
"msg": "登录成功",
"data": {
"access_token": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9...",
"refresh_token": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9...",
"token_type": "Bearer",
"expires_in": 7200,
"user": {
"id": 1,
"username": "admin",
"realname": "管理员",
"avatar": ""
}
}
}
将 access_token 保存备用。登录同时会写入登录日志(IP、归属地、浏览器信息),可在「系统管理 → 日志管理 → 登录日志」查看。
:::warning
验证码参数名为 key / code(与 /api/captcha 响应字段命名保持一致),不是 captchaKey / captchaCode。验证码错误时返回 {"code":1,"msg":"验证码错误"}。
:::
步骤三:调用业务接口
使用 Token 调用需要认证的接口:
# -----------------------------------------------------------------------------
# 获取用户分页列表(GET + Authorization 头)
# -----------------------------------------------------------------------------
# pageNo=1\&pageSize=10 → 分页参数(\& 是 bash 转义,防止 & 被解释为后台运行符)
# -H "Authorization: Bearer <token>" → 在请求头中携带 JWT Token
curl "http://admin.laravel13.naivevue/api/user/page?pageNo=1&pageSize=10" \
-H "Authorization: Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9..."
响应示例(分页字段固定为 records / total / current / size / pages,键名已自动转驼峰):
{
"code": 0,
"ok": true,
"msg": "操作成功",
"data": {
"records": [
{
"id": 1,
"username": "admin",
"realname": "管理员",
"status": 1,
"statusText": "启用",
"createTime": "2026-01-01 00:00:00"
}
],
"total": 1,
"current": 1,
"size": 10,
"pages": 1
}
}
步骤四:测试其他接口
# -----------------------------------------------------------------------------
# 获取当前登录用户信息
# -----------------------------------------------------------------------------
curl http://admin.laravel13.naivevue/api/index/getUser \
-H "Authorization: Bearer <your_token>"
# -----------------------------------------------------------------------------
# 获取当前用户的菜单列表(用于前端动态路由)
# -----------------------------------------------------------------------------
curl http://admin.laravel13.naivevue/api/index/getMenus \
-H "Authorization: Bearer <your_token>"
# -----------------------------------------------------------------------------
# 获取字典项(gender = 性别字典的编码)
# -----------------------------------------------------------------------------
curl http://admin.laravel13.naivevue/api/dict/item/getDictItemList/gender \
-H "Authorization: Bearer <your_token>"
# -----------------------------------------------------------------------------
# 刷新 Token(access_token 过期后,用 refresh_token 换取新的令牌对)
# -----------------------------------------------------------------------------
# refresh 为公开接口(无需 access_token)
curl -X POST http://admin.laravel13.naivevue/api/refresh \
-H "Content-Type: application/json" \
-d '{"refresh_token": "<your_refresh_token>"}'
# -----------------------------------------------------------------------------
# 登出(令牌即时失效,需携带 access_token)
# -----------------------------------------------------------------------------
curl -X POST http://admin.laravel13.naivevue/api/logout \
-H "Authorization: Bearer <your_token>"
错误响应示例
401 未授权(Token 缺失或无效)
{
"code": 401,
"ok": false,
"msg": "未授权,请先登录",
"data": null
}
HTTP 状态码为 200,前端据 body code=401 触发跳转登录。
403 禁止访问(权限不足)
{
"code": 403,
"ok": false,
"msg": "无访问权限",
"data": null
}
参数验证失败(FormRequest,code=1)
{
"code": 1,
"ok": false,
"msg": "参数验证失败",
"data": {
"username": ["用户名不能为空"],
"password": ["密码不能为空"]
}
}
业务失败(BizException,code=1)
{
"code": 1,
"ok": false,
"msg": "验证码错误",
"data": null
}
:::tip 统一约定
所有接口 HTTP 状态码默认 200(403 例外),以响应体 code 判断结果:0 成功,其余为失败。详见 8.1 统一响应格式 与 5.16 统一响应与异常抛出。
:::
ApiFox 配置建议
-
创建环境,设置变量:
base_url=http://admin.laravel13.naivevuetoken= 登录后填入 access_token
-
在请求头中使用变量:
Authorization=Bearer {{token}}
-
登录请求的「后置操作」中添加脚本自动保存 Token:
// 解析响应 JSON
var response = pm.response.json();
// 登录成功时自动将 access_token 保存到环境变量
if (response.code === 0) {
pm.environment.set("token", response.data.access_token);
}