以项目登录接口为例-大前端之开发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:设置登录请求
- 打开 Postman: 打开 Postman 应用程序。
- 创建新的请求:
- 点击左上角的 “New” 按钮。
- 选择 “Request” 来创建一个新的请求。
- 为请求命名,例如 “Login Request”。
- 设置请求方法和 URL:
- 在请求方法下拉列表中选择
POST
。 - 在 URL 输入框中输入接口 URL,例如
https://stqingtingapi.youyacao.com/api/v1/login
。
- 设置请求体:
- 点击 “Body” 选项卡。
- 选择 “raw” 和 “JSON” 格式。
- 输入登录请求的 JSON 数据,例如:
json
{ "username": "your_username", "password": "your_password", "flag": 0 }
- 发送请求:
- 点击 “Send” 按钮,发送请求。
- 在响应部分,你会看到服务器返回的 Token,如下所示:
json
{ "code": 200, "msg": "success", "data": { "token": "Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9...", "expires_in": 3600 } }
实际操作,
跟着卓伊凡开始吧,输入请求地址,传入登录请求参数,用户名username 和password ,因为我这个是手机号账户,所以flag 非强制 int 写0
点击send直接请求
请求成功得到,token!这个我们复制出来先,暂存记事本之类
带token请求
以下为思路
步骤 2:使用 Token 进行后续请求
- 创建新的请求:
- 点击左上角的 “New” 按钮。
- 选择 “Request” 来创建一个新的请求。
- 为请求命名,例如 “Protected Request”。
- 设置请求方法和 URL:
- 在请求方法下拉列表中选择适当的 HTTP 方法(例如
GET
)。 - 在 URL 输入框中输入需要访问的受保护资源的 URL,例如
https://stqingtingapi.youyacao.com/api/v1/protected/resource
。
- 设置请求头:
- 点击 “Headers” 选项卡。
- 添加一个新的请求头,键为
Authorization
,值为Bearer your_token
,其中your_token
替换为上一步获取的实际 Token。
- 发送请求:
- 点击 “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" } ] } }