前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >微信小程序登录token问题==封装在request请求中

微信小程序登录token问题==封装在request请求中

作者头像
六个周
发布2022-10-28 14:53:02
1.3K0
发布2022-10-28 14:53:02
举报
文章被收录于专栏:六个周六个周

小程序中关于登录流程有这样一个问题: 一般的小程序开发都是在app.js的onLaunch中,通过wx.login调用一次后端接口,拿到token、用户信息等数据。 而在进入的首页中,以pages/index/index页面为例。 一般情况下,在进入一个页面也需要调用接口获取页面数据,但这个页面的数据需要由wx.login调用接口返回的token,这个时候,由于app.js中的接口还未返回,所以会出现当前页面调用接口不成功的问题。 于是,针对这个问题,经过小一番代码测试,将登陆接口封装在了API请求的request方法中,做个代码记录。

代码示例如下:

代码语言:javascript
复制
// app.js
App({
  onLaunch() {
  }
})

app.js中不做任何操作

重点在于request的封装,request中唯一的依赖为一个常量配置文件,配置文件为环境的BaseApi和配置白名单(不需要token的接口)

代码语言:javascript
复制
// config.js
const envVersion = __wxConfig.envVersion
let Base_URL;
if (envVersion === 'develop') { //开发版
  Base_URL = 'https://blog.liugezhou.online'
} else if (envVersion === 'trial') { //体验版
  Base_URL = 'https://blog.liugezhou.online'
} else if (envVersion === 'release') { //生产版
  Base_URL = 'https://blog.liugezhou.online'
}
let whiteApi = ['/loginApi] //不需要token的白名单-**loginApi为登陆接口**

module.exports = {
  Base_URL,
  whiteApi
}

在以上简单工作做好以后,直接将最后的request封装:

代码语言:javascript
复制
// request.js
const { Base_URL, whiteApi } = require('./config');

const getUserInfo = () => {
  return new Promise(resolve => {
    wx.login({
      success: async res => {
        const useInfo = await new Promise((resolveUser) => {
          resolveUser(request('/loginApi', 'POST', {
            code: res.code
          }, true))
        });
        wx.setStorageSync('token', useInfo.data.token)
        resolve(useInfo.data)
      }
    })
  })
}

// 参数依次代表 api/请求方法/接口数据/contentType类型
const request = async (api, method, data, type) => {
  let token = wx.getStorageSync('token') || '';
  if (!token && !whiteApi.includes(api)) {
    const result = await new Promise(resolve => {
      resolve(getUserInfo())
    })
    token = result.token
  }
  let ContentType = type ? 'application/json' : 'application/x-www-form-urlencoded'
  let url = Base_URL + api
  return new Promise((resolve, reject) => {
    wx.request({
      url,
      method,
      data,
      header: {
        'Content-Type': ContentType,
        'Authorization': 'Bearer ' + token
      },
      success(res) {
        resolve(res.data)
      },
      fail(error) {
        reject(error)
      }
    })
  })
}
module.exports = {
  // 创建用户身份 
  apiDemo: (data) => { 
    return request(`/apiDemo`, 'POST', data)
  },
}

最后模拟下业务,apiDemo这个接口是需要有token才能访问的:

代码语言:javascript
复制
// pages/index/index
import { apiDemo } from '../../utils/request'

api().then(res=>{})

这样讲获取token才能访问接口的异步等待问题就可以得到良好的解决,主要的问题是在request请求中同步获取结果这里。

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2022-07-15,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

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

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
云开发 CloudBase
云开发(Tencent CloudBase,TCB)是腾讯云提供的云原生一体化开发环境和工具平台,为200万+企业和开发者提供高可用、自动弹性扩缩的后端云服务,可用于云端一体化开发多种端应用(小程序、公众号、Web 应用等),避免了应用开发过程中繁琐的服务器搭建及运维,开发者可以专注于业务逻辑的实现,开发门槛更低,效率更高。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档