uniapp，vue3，ts，接口封装、小程序登录

在src下创建public文件夹，在public文件夹里创建request.ts

//设置基地址
const baseUrl = 'https://meituan.thexxdd.cn/api'

//封装请求
function request(
  url: string,
  method: 'GET' | 'POST',
  data: string | object | ArrayBuffer
) {
  return new Promise((resolve, reject) => {
    //发起uni请求
    uni.request({
      url: baseUrl + url,//路径
      method,
      data,
      //进入接口成功
      success: (res) => {
        if (res.statusCode == 200) {
          resolve(res)
        } else if (res.statusCode == 401) {
          uni.showToast({
            title: "信息过期",
            icon: "none",
            duration: 1000
          })
          resolve(res)
        } else if (res.statusCode == 500) {
          uni.showToast({
            title: "服务器错误",
            icon: "none",
            duration: 1000
          })
          resolve(res)
        } else if (res.statusCode == 202) {
          uni.showToast({
            title: "服务器错误",
            icon: "none",
            duration: 1000
          })
          resolve(res)
        } else{
          uni.showToast({
            title: "服务器错误",
            icon: "none",
            duration: 1000
          })
          resolve(res)
        }
      },
      // 进入接口失败
      fail:(err)=>{
        uni.showToast({
          title:"服务器错误",
          icon:"none",
          duration:1000
        })
        reject(err)
      }
    })
  })
}
//抛出
export {request}

在public文件夹创建api.js

// 引入封装好的接口
import {request} from "../request"


const RequestApi = {
// 第一个参数是去掉公共地址剩下的地址
// 第二个参数请求方式 支持多种方式  get post put delete 等等
// 第三个参数发送请求要配置的参数 无参数的情况下可以写成对象
  Frontpage: () => request('/frontpage', 'GET', {})
}
//抛出
export{RequestApi}

请求写完了之后我们还有一些逻辑操作需要用到token，需要在小程序进行登录，接下来写小程序登录的方法

在request.ts写请求头

1、下载js-base64  下载方法：npm install -- save js-base64

2、在封住的request里面写请求头

3、请求小程序登录接口，我这个使用ts写的蓝色的单词是ts的规范接口类型，用js的把这个删了就行了

4、在登录页面登录按钮添加点击事件、当点击事件触发的时候进行的操作

在登录页面调用封装好的登录接口

5、 调用api接口登录

6、点击登录

 7、在访问一些需要登录的页面，没有登录或者登录过期的时候后台会返回一个失败信息，这个失败信息的statusCode是401，所以需要在请求接口的时候判断，如果返回的是401，需要跳转到登录页面，重新登陆。

 代码：

request.ts

const baseUrl = 'https://meituan.thexxdd.cn/api'

//获取token npm install -- save js-base64
import { Base64 } from 'js-base64'
function getToken(): string {
    const token = uni.getStorageSync('wxuser').user_Token || ''
    //后端和前端的约定 
    const base64_token = Base64.encode(token + ':')
    return 'Basic ' + base64_token
}

//请求
function request(url: string, method: 'GET' | 'POST', data: string | object | ArrayBuffer) {
    return new Promise((resolve, reject) => {
        uni.request({
            url: baseUrl + url,
            method,
            data,
            header: {
                Authorization: getToken()
            },
            success: (res: any) => {
                if (res.statusCode == 200) {
                    resolve(res)
                } else if (res.statusCode == 401) {
                    //权限过期
                    // 没有权限访问接口:跳转到登陆界面
                    uni.navigateTo({ url: '/pages/login-page/index' });
                    uni.showToast({
                        title: "信息过期",
                        icon: 'none',
                        duration: 1000
                    })
                    reject(res)
                } else if (res.statusCode == 400) {
                    uni.showToast({
                        title: '开发者某个字段或参数填写不对',
                        icon: 'none',
                        duration: 1000,
                    });
                    reject(res);
                } else if (res.statusCode == 500) {
                    uni.showToast({
                        title: "服务器错误",
                        icon: 'none',
                        duration: 1000
                    })
                    reject(res)
                } else if (res.statusCode == 202) {
                    uni.showToast({
                        title: res.data.msg,
                        icon: 'none',
                        duration: 1000
                    })
                    reject(res)
                } else {
                    uni.showToast({
                        title: "服务器错误",
                        icon: 'none',
                        duration: 1000
                    })
                    reject(res)
                }
            },
            fail: (err: any) => {
                uni.showToast({
                    title: "服务器错误",
                    icon: 'none',
                    duration: 1000
                })
                reject(err)
            }
        })
    })

}

登录页面：

<template>
  <view class="Login-page">
    <image
      mode="aspectFill"
      src="https://diancan-1252107261.cos.accelerate.myqcloud.com/yiliao/denglu-yemian.jpg"
    ></image>
    <button @click="Login">授权登陆</button>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive, toRefs } from "vue";
import { RequestApi } from "@/public/request";
// 授权登陆
function Login() {
  uni.getUserInfo({
    // desc: "获取个人信息",
    withCredentials: false,
    lang: "zh_CN",
    timeout: 10000,
    success: (res) => {
      let { avatarUrl, nickName } = res.userInfo;
      // 获取code
      uni.login({
        success: (code) => {
          console.log(code);

          uni.showLoading({ title: "登陆中", mask: true });
          ApiLogin(avatarUrl, nickName, code.code);
        },
        fail: (err) => {
          uni.showToast({ title: "登录失败", icon: "none", duration: 1000 });
        },
      });
    },
    fail: (err) => {
      uni.showToast({ title: "登录失败", icon: "none", duration: 1000 });
    },
  });
}

// 调用api接口登陆
async function ApiLogin(avatarUrl: string, nickName: string, code: string) {
  try {
    let obj = {
      appid: "",//id
      secret: "",//秘钥
      avatarUrl,
      nickName,
      code,
    };
    let res: any = await RequestApi.WxLogin(obj);
    // 存储用户信息到本地缓存，然后返回上一页
    uni.setStorageSync("wxuser", res.data.data);
    setTimeout(() => {
      uni.navigateBack({ delta: 1 });
      uni.hideLoading();
    }, 600);
  } catch (error) {
    uni.showToast({ title: "登录失败", icon: "none", duration: 1000 });
  }
}
</script>