官方时序图如下:
![](https://i-blog.csdnimg.cn/blog_migrate/2de9d63e5f547a2387356c0e108b3146.png)
首先我们要知道哪些页面需要token,token值从哪里来?怎么样才能拿到token,token有什么作用?
1.token主要有两个作用:①:防止表单重复提交(防止表单重复提交一般还是使用前后端都限制的方式,比如:在前端点击提交之后,将按钮置为灰色,不可再次点击,然后客户端和服务端的token各自独立存储,客户端存储在Cookie或者Form的隐藏域(放在Form隐藏域中的时候,需要每个表单)中,服务端存储在Session(单机系统中可以使用)或者其他缓存系统(分布式系统可以使用)中。)
2.使用基于 Token 的身份验证方法,在服务端不需要存储用户的登录记录。大概的流程是这样的:
1.客户端使用用户名跟密码请求登录
2.服务端收到请求,去验证用户名与密码
3.验证成功后,服务端会签发一个 Token,再把这个 Token 发送给客户端
4.客户端收到 Token 以后可以把它存储起来,比如放在 Cookie 里或者 Local Storage 里
5.客户端每次向服务端请求资源的时候需要带着服务端签发的 Token
6.服务端收到请求,然后去验证客户端请求里面带着的 Token,如果验证成功,就向客户端返回请求的数据
第一步:登录流程
参考文档:
https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/login.html
wx.login()–>wx.request()–>后端—>腾讯服务
前端–>后端–>腾讯服务器
第二步:具体如何实现
登录--检测是否注册--没注册先获取用户信息先注册(写入公司数据库)--然后再登录
(1)点击封装的登录模块中的”允许“按钮---执行processLogin方法
允许
processLogin代码如下:
processLogin(e) {
//如果没有用户userInfo
if (!e.detail.userInfo) {
wx.showToast({
title: '已取消',
icon: 'none',
})
return;
}
//如果
用userInfo,则调用register注册方法
AUTH.register(this);
}
(2)register方法
注册时参考接口文档:https://api.it120.cc/doc.html#/%E5%89%8D%E7%AB%AFapi%E6%8E%A5%E5%8F%A3%E6%96%87%E6%A1%A3/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F/registerComplexUsingPOST_7
async function register(page) {
let _this = this;
wx.login({
success: function (res) {
let code = res.code; //
微信登录接口返回的 code 参数,下面注册接口需要用到
//微信小程序内置获取用户信息的api方法
wx.getUserInfo({
success: function (res) {
console.log('getUserInfo::::::',res)
let iv = res.iv; //加密值
let encryptedData = res.encryptedData; //包括敏感数据在内的完整用户信息的加密数据
let referrer = '' // 推荐人
let referrer_storge = wx.getStorageSync('referrer');
if (referrer_storge) {
referrer = referrer_storge;
}
// 下面开始调用注册接口,用咱们封装调用接口方法去注册
WXAPI.register_complex({
code: code,
encryptedData: encryptedData,
iv: iv,
referrer: referrer
}).then(function (res) {
console.log('登录注册成功状态:',res)
_this.login(page);
})
}
})
}
})
}
(3)执行登录login方法
async function login(page){
const _this = this
wx.login({
success: function (res) {
WXAPI.login_wx(res.code).then(function (res) {
console.log('登录成功后返回结果::::::',res)
if (res.code == 10000) {
// 去注册
//_this.register(page)
return;
}
if (res.code != 0) {
// 登录错误
wx.showModal({
title: '无法登录',
content: res.msg,
showCancel: false
})
return;
}
登录成功将后端
返回的token和uid存储到本地缓存中
wx.setStorageSync('token', res.data.token)
wx.setStorageSync('uid', res.data.uid)
//如果有page,则重新刷新page对应的页面,或用wx.navigaterTo()
if ( page ) {
page.onShow()
}
})
}
})
}
下面两个方法主要用于检测登录态和token是否过期
1.只检测登录态(检测微信返回)
async function checkSession(){
return new Promise((resolve, reject) => {
wx.checkSession({
success() {
return resolve(true)
},
fail() {
return resolve(false)
}
})
})
}
总体检测登录状态,包括token和微信登录态 返回 true 或false
async function checkHasLogined() {
//获取本地存储的token
const token = wx.getStorageSync('token')
//如果没有token,直接返回false
if (!token) {
return false
}
//
检测微信登录态
/**
- 调用成功说明当前 session_key 未过期,调用失败说明 session_key 已过期
*/
const loggined = await checkSession()
//如果没有登录态,则移除token,并返回false
if (!loggined) {
wx.removeStorageSync('token')
return false
}
//检测登录token是否有效
const checkTokenRes = await WXAPI.checkToken(token)
//如果登录token无效,移除token并返回false
if (checkTokenRes.code != 0) {
wx.removeStorageSync('token')
return false
}
如果有token并且有效,并且微信登录态也有效则返回true
return true
}