《微信小程序》第五章：登录-API封装

export interface LoginDataResponse {
  api_key: string
  username: string
  token_key: string
  role: string | null
  email: string
}

export interface LoginResponse {
  status_code: number;
  status: string;
  message?: string;
  data?:LoginDataResponse
  }

文档目的本文档用于描述「登录接口」返回的 JSON 数据结构，方便前端、客户端及服务端开发人员在对接时快速理解字段含义、类型约束与使用场景。
适用范围

任何依赖登录态（token_key / api_key）的后续接口

自动化测试脚本、接口文档生成工具

接口返回总览

javascript 复制代码

{
  "status_code": 200,
  "status": "success",
  "message": "登录成功",
  "data": {
    "api_key": "ae139f8f6a8efc2a74a1e852c5cdaa43",
    "username": "zhangsan",
    "token_key": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...",
    "role": "admin",
    "email": "zhangsan@example.com"
  }
}

异常示例

javascript 复制代码

{
	"status_code": 400,
	"status": "error",
	"message": "password is error",
	"data": {
		"api_key": "ae139f8f6a8efc2a74a1e852c5cdaa43",
		"username": "some-login-id6",
		"token_key": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9..",
		"role": null,
		"email": "user@example.com"
	}
}

API封装

建立src\api\login.ts文件

javascript 复制代码

import { http } from '@/src/utils/request'
import { LoginResponse,LoginDataResponse } from '@/src/model/login'

  
/* ---------- 类型定义（按后端实际改） ---------- */
export const loginAPI = (data: any): Promise<LoginDataResponse> =>
  http.post<LoginDataResponse>('/login', data)

loginAPI ：对外函数

接收任意类型 data （用户名、密码）

返回Promise<LoginDataResponse>

data: any 丢失了类型约束，具体根据实际情况可以写成：

javascript 复制代码

interface LoginParams { username: string; password: string }
data: LoginParams

请求调用

javascript 复制代码

http.post<LoginDataResponse>('/login', data)

把响应体直接映射成 LoginDataResponse ，参数为data少了一层 response.data 的提取。

登录页

html 复制代码

<template>
  <view class="page">
    <input v-model="form.username" placeholder="账号" />
    <input v-model="form.password" placeholder="密码" password />
    <button @click="login">登录</button>
  </view>
</template>

<script setup lang="ts">
import { reactive  } from 'vue'
import { onLoad } from '@dcloudio/uni-app'  //
// import { http } from '@/src/utils/request'
import { loginAPI } from '@/src/api/login'
import { LoginResponse,LoginDataResponse  } from '@/src/model/login'

const form = reactive({ username: '', password: '' })

/* 生命周期：页面加载时回显上次登录名 */
onLoad(() => {
  const lastUser = uni.getStorageSync('userName') as string | ''
  if (lastUser) form.username = lastUser
})

async function login() {
  if (!form.username || !form.password) return
  try {
	const responseData: LoginDataResponse= await loginAPI(form)
	uni.setStorageSync('token', responseData.token_key)
	uni.setStorageSync('userName', responseData.username)
    uni.reLaunch({ url: '/pages/index/index' })
  } catch {
    // 失败不做任何提示（按你要求）
	console.error('登录失败')
  }
}
</script>

<style scoped>
.page{padding: 200rpx 60rpx}
input{border: 1px solid #ddd;margin: 20rpx 0;padding: 20rpx;border-radius: 8rpx}
button{margin-top: 40rpx}
</style>

生命周期回调

javascript 复制代码

onLoad(() => {
  const lastUser = uni.getStorageSync('userName') as string | ''
  if (lastUser) form.username = lastUser
})

读取本地缓存 userName ，若存在则回显到账号输入框，减少用户重复输入。

核心方法 -- login()

javascript 复制代码

async function login() {
  if (!form.username || !form.password) return
  try {
	const responseData: LoginDataResponse= await loginAPI(form)
	uni.setStorageSync('token', responseData.token_key)
	uni.setStorageSync('userName', responseData.username)
    uni.reLaunch({ url: '/pages/index/index' })
  } catch {
    // 失败不做任何提示（按你要求）
	console.error('登录失败')
  }
}

非空校验

账号或密码为空时直接 return ，不继续请求。

请求接口

await loginAPI(form) ，入参即整个 form 对象（字段名需与后端保持一致）。

缓存令牌

把返回的 token_key 写入 uni.setStorageSync('token') ，供后续业务接口在请求头携带。

缓存用户名

方便下次回显，同时可用于个人中心展示。

跳转首页

uni.reLaunch 关闭所有页面再跳转，避免用户通过返回键再次回到登录页。