小程序登录流程
-
小程序登录流程可分为三部分
-
小程序,开发者服务器,微信服务器
我这里主要介绍小程序与开发者服务器交互
- 先从onlaunch先从缓存中取出token
const token=wx.getStorageSync(TOKEN)
- 判断token是否有值
if(token && token.length !==0){
//已经有token
//进行验证token是否过期
this.checkout(token)
}else{
//没有token进行登录操作
this.login()
}
}
- 进行验证token是否过期
checkout(token){
console.log('进行验证token操作');
wx.request({
//url指的是开发者服务地址,可以根据自己需求
url: 'http://123.207.32.32:3000/auth',
method:'POST',
header:{
token
},
success :(res)=>{
//res.data.errCode是服务器返回给前台的数据,可以请求成功以后将res打印
if(!res.data.errCode){
//token有效
console.log('token有效');
//将token重新保存入全局变量
this.globalData.token=token
}else{
//token无效,重新登录
this.login()
}
},
fail: (err)=>{
console.log(err);
}
})
}
4.登录操作
login(){
//首次登录操作
console.log('进行登录操作');
wx.login({
//code只有5分钟有效期
success: (res)=>{
//console.log(res);
//1.获取code
const code=res.code
//2.将code发送给自己的服务器
wx.request({
url: 'http://123.207.32.32:3000/login',
method:"POST",
data:{
//除了code以外还可以传递其他参数比如账号+密码
code
},
success:(res)=>{
//请求成功时获得后台服务器返回的token,并将token保存下来,保存在全局变量当中,因为首页或者其他
//页面需要发送网络请求
//token是服务端生成的一串字符串,以作客户端进行请求的一个令牌,
//当第一次登录后,服务器生成一个Token便将此Token返回给客户端,以后客户端只需
//带上这个Token前来请求数据即可,无需再次带上用户名和密码。
// console.log(res);
//1取出token
const token=res.data.token
//2.进行保存到全局变量
this.globalData.token=token
// console.log(this.globalData.token);
//3.进行本地保存可以使用异步操作或同步操作
wx.setStorageSync(TOKEN, token)
}
})
}
})
}
完整流程,在app.js文件操作
const TOKEN='token'
App({
globalData: {
userInfo: null,
token:''
},
onLaunch(){
//1.先从缓存中取出token
const token=wx.getStorageSync(TOKEN)
//2判断token是否有值
if(token && token.length !==0){
//已经有token
//进行验证token是否过期
this.checkout(token)
}else{
//没有token进行登录操作
this.login()
}
},
checkout(token){
console.log('进行验证token操作');
wx.request({
url: 'http://123.207.32.32:3000/auth',
method:'POST',
header:{
token
},
success :(res)=>{
if(!res.data.errCode){
//token有效
console.log('token有效');
this.globalData.token=token
}else{
//token无效
this.login()
}
},
fail: (err)=>{
console.log(err);
}
})
}
,
login(){
//登录操作
console.log('进行登录操作');
wx.login({
//code只有5分钟有效期
success: (res)=>{
//console.log(res);
//1.获取code
const code=res.code
//2.将code发送给自己的服务器
wx.request({
url: 'http://123.207.32.32:3000/login',
method:"POST",
data:{
//除了code以外还可以传递其他参数比如账号+密码
code
},
success:(res)=>{
//请求成功时获得后台服务器返回的token,并将token保存下来,保存在全局变量当中,因为首页或者其他
//页面需要发送网络请求
//token是服务端生成的一串字符串,以作客户端进行请求的一个令牌,
//当第一次登录后,服务器生成一个Token便将此Token返回给客户端,以后客户端只需
//带上这个Token前来请求数据即可,无需再次带上用户名和密码。
// console.log(res);
//1取出token
const token=res.data.token
//2.进行保存到全局变量
this.globalData.token=token
// console.log(this.globalData.token);
//3.进行本地保存可以使用异步操作或同步操作
wx.setStorageSync(TOKEN, token)
}
})
}
})
}
})