微信小程序request消息头中添加token(在token自动更新的基础上)

 这也是我第一次完完整整的肚子写完一个微信小程序,首先我觉得有必要总结的就是request请求要注意的小坑。一般request都要求携带token,所以先从获取token写起:

  1. 获取token:直接上代码

bindGetUserInfo: function (e) {

  1. var that=this

    if (that.data.userName.length == 0 || that.data.userpwd.length == 0) {

    wx.showToast({

    title: '账号或密码不能为空',

    icon: 'none',

    duration: 2000

    })

    } else {

    wx.login({        //这一步先获取code

    success: function (res) {

    that.setData({

    code:res.code

    })

    console.log("code是:"+that.data.code)

    wx.request({

    url: 'http://47.101.166.67:8080/login',

    header: { 'Content-Type': 'application/json','code': res.code},//将获取的code放在request消息头中,这一步主要用于请求服务器以获取token

//根据自己的API文档对data数据进行编写

data: {

userName:that.data.userName,

userPwd:that.data.userpwd

},

method:'POST',

success: function (res) {//获取成功,返回的res中会带token,将数据打印出来,准确查看token在哪个数组里面。

console.log("成功");

that.setData({

resmsg:res,

token:res.data.data.token,

code:res.data.data.code

})

console.log(that.data.resmsg)

//登陆成功后跳转

if(res.statusCode==200){

if(res.data.code==2000){

wx.getStorage({

key: 'token',

success:function(res){

that.setData({

token1:res.data

})

}

})

if(that.data.token1.length>0){wx.removeStorage({

key: 'token',

})

wx.setStorage({//缓存token

data: that.data.token,

key: 'token',

success:function(res){

console.log("数据缓存成功"+that.data.token)

}

})

wx.setStorageSync('token', that.data.token)

}else{

wx.setStorage({//缓存token

data: that.data.token,

key: 'token',

success:function(res){

console.log("数据缓存成功"+that.data.token)

}

})

}

setTimeout(function(){

wx.switchTab({

url:'../../pages/first/first',

})

},1500)

}else{

wx.showToast({

title:'登陆失败',

icon:'none',

duration:2000

})

}

}else{

wx.showToast({

title:'网络错误',

icon:'none',

duration:2000

})

}

}

})

}

})

}

},

2.获取token后,如何运用token(此次代码是我用来获取定位数据的)

onReady: function () {

var that = this

//查询最后一次定位

var marker=[]

let header = {}//定义一个变量存放request消息头的数据

let token = wx.getStorageSync('token')//在上一步的获取token中,我将token放入了缓存中

header['token'] = token;//定义变量header中的token的值为获取的token值

wx.request({

url: 'http://47.101.166.67:8080/api/position/9516637909',

data: {

deviceId:'9516637909',

},

header: header,//将定义的局部变量赋值给header

method:'GET',

success:function(res) {

console.log("消息token"+token)

marker.push({

id: Number(res.data.data.deviceId),

iconPath: 'dingwei.png',

latitude: Number(res.data.data.latitude),

longitude: parseFloat(res.data.data.longitude),

title:res.data.data.address,

width: 30,

height: 30,

})

that.setData({

marker:marker,

lo2:parseFloat(res.data.data.longitude),

la2:Number(res.data.data.latitude)

})

console.log("获取的设备数据",res)

},

fail(res){

wx.showToast({

title: that.data.resmsg,

icon: 'none',

duration: 2000

})

wx.navigateTo({

url: '../../pages/log/log',

})

console.log("获取失败")}

})

},

这样定义token的原因是:token有时效性,过了一段时间就失效,所以在前端需要在登陆的时候随时更新。以上是最简易的代码,当然熟悉了整个过程后,可以将整个登陆过程和请求过程封装成一个方法,直接在需要的页面引用即可。

猜你喜欢

转载自blog.csdn.net/Job_class/article/details/116136256
今日推荐