0
点赞
收藏
分享

微信扫一扫

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

搬砖的小木匠 2024-04-19 阅读 7
场景:

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

 封装的登陆文件(user.js)
/**
* 用户相关服务
*/


/**
* 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)
/**
* 封封微信的的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)
}
})
})
}
代码使用 
点击登陆按钮
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>
  //登录
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('微信登录失败')
}
})
},
  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
})
登陆后续自己的操作
})
})
},

举报

相关推荐

0 条评论