微信原生小程序封装用户登陆

场景：

后端在用户登陆后会返回resfreshToken和token；

open-type是小程序中button的属性之一，合法霍倩倩getUserInfo,引导用户授权，可以从bindgetuserinfo回调中获取到用户信息。button可以指定plain属性，完全去掉样式，跟view类似。

封装的登陆文件(user.js)

javascript 复制代码

/**
 * 用户相关服务
 */

/**
 * Promise封装wx.checkSession
 */
function checkSession() {
  return new Promise(function(resolve, reject) {
    wx.checkSession({
      success: function() {
        resolve(true);
      },
      fail: function() {
        reject(false);
      }
    })
  });
}

/**
 * Promise封装wx.login
 */
function wxlogin() {
  return new Promise(function(resolve, reject) {
    wx.login({
      success: function(res) {
        if (res.code) {
          resolve(res);
        } else {
          reject(res);
        }
      },
      fail: function(err) {
        reject(err);
      }
    });
  });
}

/**
 * 判断用户是否登录
 */
function checkIndex(){
  console.log(wx.getStorageSync('token'))
  if(!wx.getStorageSync('token')){
    console.log("11")
    wx.navigateTo({
      url: 'pages/auth/login/login',
    })
    console.log("12")
  }
}

function checkLogin() {
  return new Promise(function(resolve, reject) {
    if (wx.getStorageSync('token')) {
      checkSession().then(() => {
        resolve(true);
      }).catch(() => {
        reject(false);
      });
    } else {
      console.log("跳转")
      wx.navigateTo({
        url: '../pages/auth/login/login',
      })
      reject(false);
    }
  });
}

module.exports = {
  checkLogin,
  checkIndex,
  wxlogin
};

封装微信的网络请求(util.js)

javascript 复制代码

/**
 * 封封微信的的request
 */
function requestForCheckLincense(url, data = {}, method = 'GET') {
  return new Promise(function (resolve, reject) {
    wx.request({
      url: url,
      data: data,
      method: method,
      header: {
        'Content-Type': 'application/json',
        Authorization: 'dowsure' + wx.getStorageSync('token').token
      },
      success: function (res) {
        console.log('response--', res)
        res = res.data
        if (res.code == 200 || res.code == 0) {
          resolve(res)
        } else {
          if (res.code == 401) {
            showErrorToast('登录已失效，请重新登录')
            wx.removeStorageSync('token')
            // 登录失效
            // 切换到登录页面
            wx.reLaunch({
              url: '/pages/commonLoan/commonIndex/commonIndex'
            })
          } else {
            res.message = res.message || res.msg || '网络异常'
            showErrorToast(res.message)
            reject(res)
          }
        }
      },
      fail: function (err) {
        reject(err)
      }
    })
  })
}

代码使用

javascript 复制代码

点击登陆按钮
goLogin() {
    var refreshToken = wx.getStorageSync('refreshToken')
    if (refreshToken) {
      // 如果登陆过，刷新token；
      this.rToken(refreshToken)
    } else {
      this.setData({
        showLogin: true
      })
    }
  },

点击自己写的按钮然后打开登陆的弹窗
<van-popup
  position="bottom"
  custom-style="height:25%;background:linear-gradient(95deg, #F8FCFF -0.03%, #EDF5FF 64.44%, #F8FCFF 133.06%);"
  round
  show="{{ showLogin }}"
  bind:close="onLoginClose"
>
微信提供的open-type
  <button open-type="getPhoneNumber" class="wx-login-btn wx-btn" bindgetphonenumber="wxLogin">
    手机号快捷登录
  </button>
  <checkbox-group
    bindchange="checkboxChange"
    class="certificate"
    style="width: 90%; margin: 24rpx 40rpx"
  >
    <checkbox checked="{{isagree}}" class="checkbox" value="{{isagree}}"></checkbox>
    <view class="certificate-txt"
      >阅读并同意<text class="txt" bindtap="openUrl" data-num="lending003"
        >《风险提示与免责声明》</text
      >、<text class="txt" bindtap="openUrl" data-num="lending008"
        >《服务协议》</text
      ></view
    >
  </checkbox-group>
</van-popup>

javascript 复制代码

  //登录
  wxLogin(e) {
    if (e.detail.errMsg && e.detail.errMsg.indexOf('user deny') !== -1) {
      return
    }
    if (!this.data.isagree) {
      return util.showErrorToast('请勾选协议')
    }
    wx.getUserInfo({
      desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
      success: res => {
        wx.setStorage({
          key: 'userInfo',
          data: {
            nickName: res.userInfo.nickName,
            avatarUrl: res.userInfo.avatarUrl
          }
        })
        this.doLogin(e.detail)
      },
      fail: () => {
        util.showErrorToast('微信登录失败')
      }
    })
  },

javascript 复制代码

  doLogin: function (obj) {
    user
      .checkLogin()
      .then(() => {
        this.login(obj)
      })
      .catch(() => {
        this.login(obj)
      })
  },
  // 微信授权一键登录
  login: function (obj) {
    const _this = this
    wx.showLoading()
    util
      .request(
        login.getPhoneNum, {
          code: obj.code,
          source: '传入值' || '默认值',
          sourceCode: '传入值' || '默认值'
        },
        'GET'
      )
      .then(res => {
        wx.setStorage({
          key: 'token',
          data: {
            token: res.token.token,
            phone: res.username
          },
          success: function () {
           
            自己的操作
            // 获取code,以便后台获取唯一的openID
            _this.sendCodeForOpenId()
          }
        })
        if (res.refreshToken) {
          wx.setStorage({
            key: 'refreshToken',
            data: res.refreshToken
          })
        }
      })
      .catch(err => {})
  },
  // 获取code,以便后台获取唯一的openID
  async sendCodeForOpenId() {
    user.wxlogin().then(result => {
      util
        .request(
          login.setBackCodeForOpenId, {
            openId: result.code
          },
          'GET'
        )
        .then(res => {
          this.setData({
            showLogin: false
          })
          登陆后续自己的操作
        })
    })
  },