以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡

简介: 以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡

以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡

开发背景

我们做完前端后做接口联调第一步是带token请求接口!因此本文详细讲解,

实战开始

获取token

以登录接口为例

简要描述:

  • 登录接口(非强制登录)

请求URL:

  • API_BASE + /login

请求方式:

  • POST

参数:

参数名

必选

类型

说明

username

string

账号(用户名/手机号/邮箱)

password

string

密码

flag

int

1:强制用户名 0:非强制

返回示例

{
    "code": 200,
    "msg": "success",
    "data": {
        "token": "Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJodHRwOlwvXC94aW54aW5nLWFwaS50ZXN0LmNvbVwvYXBpXC92MVwvbG9naW4iLCJpYXQiOjE1ODU5ODU2NTUsImV4cCI6MTU4NTk4OTI1NSwibmJmIjoxNTg1OTg1NjU1LCJqdGkiOiJEM3hwcXlTYWRCU3NFSjc5Iiwic3ViIjoxMDAwMCwicHJ2IjoiMjNiZDVjODk0OWY2MDBhZGIzOWU3MDFjNDAwODcyZGI3YTU5NzZmNyJ9.spceIQnlkXs8oal7eiph6L9yJqOeWnhppXdzt6ulDdk",
        "expires_in": 3600
    }
}

返回参数说明

参数名

类型

说明

token

string

登录token

备注

  • 更多返回错误代码请看首页的错误代码描述

基础知识和思路如下

步骤 1:设置登录请求

  1. 打开 Postman: 打开 Postman 应用程序。
  2. 创建新的请求:
  • 点击左上角的 “New” 按钮。
  • 选择 “Request” 来创建一个新的请求。
  • 为请求命名,例如 “Login Request”。
  1. 设置请求方法和 URL:
  1. 设置请求体:
  • 点击 “Body” 选项卡。
  • 选择 “raw” 和 “JSON” 格式。
  • 输入登录请求的 JSON 数据,例如:

json

{
  "username": "your_username",
  "password": "your_password",
  "flag": 0
}
  1. 发送请求:
  • 点击 “Send” 按钮,发送请求。
  • 在响应部分,你会看到服务器返回的 Token,如下所示:

json

{
  "code": 200,
  "msg": "success",
  "data": {
    "token": "Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9...",
    "expires_in": 3600
  }
}

实际操作,

跟着卓伊凡开始吧,输入请求地址,传入登录请求参数,用户名username 和password ,因为我这个是手机号账户,所以flag 非强制 int 写0

点击send直接请求

请求成功得到,token!这个我们复制出来先,暂存记事本之类

带token请求

以下为思路

步骤 2:使用 Token 进行后续请求

  1. 创建新的请求:
  • 点击左上角的 “New” 按钮。
  • 选择 “Request” 来创建一个新的请求。
  • 为请求命名,例如 “Protected Request”。
  1. 设置请求方法和 URL:
  1. 设置请求头:
  • 点击 “Headers” 选项卡。
  • 添加一个新的请求头,键为 Authorization,值为 Bearer your_token,其中 your_token 替换为上一步获取的实际 Token。
  1. 发送请求:
  • 点击 “Send” 按钮,发送请求。
  • 在响应部分,你会看到服务器返回的响应数据。

比如我们访问一个个人中心,个人中心页面就需要带token才能访问,以个人中心我的粉丝这个接口为实例:

简要描述:

  • 我的粉丝接口(强制登录)

请求URL:

  • API_BASE + /follow/fans

请求方式:

  • POST

参数:

返回示例

{
    "code": 200,
    "msg": "成功",
    "data": [
        {
            "id": 10023,
            "username": "123405896",
            "nickname": "",
            "avatar": ""
        },
        {
            "id": 10022,
            "username": "126174538",
            "nickname": "",
            "avatar": ""
        },
        {
            "id": 10024,
            "username": "102517346",
            "nickname": "",
            "avatar": ""
        }
    ]
}

返回参数说明

参数名

类型

说明

username

string

账号

nickname

string

昵称

avatar

string

头像

新建接口,

我们在 中 加入 token

添加一个新的请求头,键为 Authorization,值为 Bearer your_token,其中 your_token 替换为上一步获取的实际 Token,也就是获取卓伊凡让你放记事本的。

再次请求 send,返回成功

以下是返回的具体json数据

复制{
    "code": 200,
    "msg": "成功",
    "data": {
        "total": 1,
        "total_page": 1,
        "current_page": 1,
        "list": [
            {
                "id": 14,
                "user_id": 154,
                "follow_id": 9,
                "status": 1,
                "updated_at": "2020-12-25 14:49:56",
                "created_at": "2020-12-24 18:08:53",
                "username": "162504389",
                "nickname": "我还是你大哥",
                "avatar": "https://qingtingcun.youyacao.com/qiniu_202012251032165296122925.png?imageView2/1/w/800/h/800",
                "vip_end_time": 0,
                "desc": "",
                "is_vip": 0,
                "is_follow": 0,
                "same_tags": 0,
                "product_num": "0"
            }
        ]
    }
}
目录
相关文章
|
12月前
|
人工智能 数据可视化 测试技术
Postman 性能测试教程:快速上手 API 压测
本文介绍API上线后因高频调用导致服务器告警,通过Postman与Apifox进行压力测试排查性能瓶颈。对比两款工具在批量请求、断言验证、可视化报告等方面的优劣,探讨API性能优化策略及行业未来发展方向。
Postman 性能测试教程:快速上手 API 压测
|
人工智能 监控 安全
API安全测试工具:数字经济的免疫防线
API安全面临漏洞盲区、配置错误与合规碎片三大挑战,传统手段难抵新型风险。破局需构建智能漏洞探针、配置审计中枢与合规映射引擎三位一体防御矩阵。Burp Suite、Noname Security、Traceable AI与板栗看板等工具助力企业实现自动化检测、精准响应与高效合规,打造API安全免疫体系。
|
XML 安全 测试技术
【干货满满】分享什么是API接口测试
API接口测试是验证应用程序编程接口功能、性能、安全性及兼容性的关键环节,通过模拟请求并验证响应结果,确保接口能正确处理各种输入和场景。测试内容涵盖功能验证、性能评估、安全防护、兼容性验证及系统可靠性。相比UI测试,API测试无需界面依赖,支持数据驱动与自动化,适用于持续集成流程。常见接口类型包括RESTful、SOAP和GraphQL API,广泛应用于电商、金融及社交平台,保障系统间数据交互的安全与高效。
|
JSON JavaScript 测试技术
用Postman玩转电商API:一键测试+自动化请求教程
Postman 是电商 API 测试的高效工具,涵盖基础配置、自动化测试、环境管理与请求自动化,助你快速提升开发效率。
|
存储 机器学习/深度学习 API
Android API Level 到底是什么?和安卓什么关系?应用发布如何知道自己的版本?优雅草卓伊凡
Android API Level 到底是什么?和安卓什么关系?应用发布如何知道自己的版本?优雅草卓伊凡
1871 31
Android API Level 到底是什么?和安卓什么关系?应用发布如何知道自己的版本?优雅草卓伊凡
|
12月前
|
存储 前端开发 安全
实现“永久登录”:针对蜻蜓Q系统的用户体验优化方案(前端uni-app+后端Laravel详解)-优雅草卓伊凡
实现“永久登录”:针对蜻蜓Q系统的用户体验优化方案(前端uni-app+后端Laravel详解)-优雅草卓伊凡
458 5
|
人工智能 数据可视化 测试技术
AI 时代 API 自动化测试实战:Postman 断言的核心技巧与实战应用
AI 时代 API 自动化测试实战:Postman 断言的核心技巧与实战应用
1368 11
|
JSON API 数据格式
抖音商品列表API秘籍!轻松获取商品列表页面数据
抖音商品列表API是抖音开放平台的核心电商接口,支持按分类、关键词、销量等条件筛选商品,具备分页、排序、数据过滤等功能,适用于电商整合、竞品分析等场景。接口返回JSON格式数据,包含商品列表、总数及分页信息,提供Python请求示例,便于开发者快速接入。
1162 0
|
监控 安全 测试技术
API测试工具评测:Apipost与Apifox的优劣深度解读
本文对比了Apipost与Apifox在API设计、数据建模、代码生成、测试能力、协作权限、性能监控、插件生态、文档管理及安全合规等方面的差异。Apifox在专业性、自动化、扩展性及团队协作上表现更优,尤其适合中大型项目与复杂管理需求,而Apipost功能较基础,适用于轻量级使用场景。
|
JSON 安全 测试技术
什么是API接口测试?这可能是全网最全的教程了!
API 是应用程序间的“中间人”,用于实现通信和数据交换。随着微服务架构的普及,API 数量激增,其质量对系统稳定性至关重要。API 测试可验证功能、性能与安全性,帮助开发者在部署前发现并修复问题,提升系统可靠性。测试内容包括请求方法、URL、请求头、请求体、响应状态码与响应数据等。常用工具如 Postman、AREX 可辅助测试,确保 API 在不同场景下的正确性与稳定性。