以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一

原创

卓伊凡

修改于 2025-02-13 20:15:15

9800

代码可运行

文章被收录于专栏：其他相关技术其他相关技术

运行总次数：0

代码可运行

以项目登录接口为例-大前端之开发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"
            }
        ]
    }
}

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

api