在你刚接触小程序时，或多或少对授权这块都有些麻木，想我第一次接触授权是在改别人项目bug的时候，看着这些操作我真的麻了。
先看看进入小程序要做什么,画了一个大概的图，底下会有代码讲解到底怎么做
image.png
下面这个教程保证一篇学会授权！！！
1、为什么要授权？
我们知道无论在app或者网页端，都有一个登录的功能，登录之后拿到后端发来的token，来代表我们唯一的身份，那么小程序的授权亦是如此，就是为了授权以后拿到代表我们唯一身份的标识。 这中间有很多操作会在后边说到。
2、如何授权？
根据微信开发文档的声明，我们现在要想触发授权，必须使用button按钮来触发，并且通过open-type类型以及bindgetuserinfo方法来调用授权
<button open-type="getUserInfo" bindgetuserinfo="bindgetuserinfo">授权</button>
image.png
3、如何判断用户点击了拒绝？
相信我们多遇到过这样的需求，用户点击了允许才会进行下一步操作，比如获取信息等等，点击拒绝那么就不作任何操作，那么我们如何判断点击了拒绝呢？
上面是通过getuserinfo方法来触发授权，这个方法是携带有参数的，打印出来是下面这样的：
getuserinfo(res){
console.log(res)
if(res.detail.userInfo){
//点击确定后需要做的操作
}
}
点击拒绝
点击允许
可以很清楚的看出来区别，那就是detail对象里的userInfo，所以我们可以根据方法里的参数来判断是否点击了授权，然后进行下一步操作
4、点击允许后做什么？
1、这时候微信内部有login方法，我们要现在微信内部登录，拿到openid
2、用openid去调取后台接口，拿到一个临时的凭证token
3、调用wx.getUserInfo方法，这时候用微信返回的字段再去调取接口获取用户最新信息，并将返回值里的token存进本地
这里第二步第三步需要和后台商量，看到底怎么实现，总之我们为了拿到token，存到本地，证明我们是登录的状态
5、代码展示
1、wxCheckSession：检查用户登录是否过期
2、login：微信内部的登录方法，用来获取openid
3、getToken：用拿到的openid去后台换取临时凭证
4、getUserInfo：这里做了一步判断是否授权的操作，授权过就去调取接口更新用户信息
5、用wx.getUserInfo拿到的值去后台获取用户的信息以及token，并且将userInfo和token都存入本地
6、可以看到我每一步都加了一个callback回调方法，这是为了在调用授权的方法之后可以做某些操作，因为要确保拿到了用户信息，所以回调最终是使用在updateUserInfo中
//app.js
App({
onLaunch: function () {
console.log("app加载")
//用户每次进来的时候先判断他的授权状态 是否过期 如果没过期那就更新用户的信息
if (wx.getStorageSync('accessToken')) {
this.wxCheckSession(() => {
console.log(this.globalData.userInfo)
});
}
},
//通过 wx.login 接口获得的用户登录态拥有一定的时效性。用户越久未使用小程序，用户登录态越有可能失效
wxCheckSession(callback) {
let vm = this
wx.checkSession({
success: function () {
//用户微信登录没有过期
if (wx.getStorageSync('accessToken')) {
//如果本地有token 那么就直接去拿用户最新信息
if (wx.getStorageSync('userInfo')) {
//这里是为了防止没连上服务器的时候下面获取不到数据
vm.globalData.userInfo = wx.getStorageSync('userInfo')
}
vm.getUserInfo(callback)
} else {
//没有token 就去走登录获取信息的流程
vm.login(callback)
}
},
fail: function () {
//用户微信登录过期，需要重新登录
vm.login(callback)
}
})
},
//调用微信登录
login(callback) {
let vm = this
wx.login({
success: res => {
if (res.code) {
// 发送 res.code 到后台换取 openId, sessionKey, unionId
vm.getToken(res.code, callback)
} else {
wx.showToast({
title: '登录失败',
})
}
}
})
},
//发送请求到后台获取token
getToken(code, callback) {
let vm = this
restful.wxBodyPost(restful.interfaces.login, {
code: code
}, function (res) {
if (res.data.code == 20000) {
wx.setStorageSync('accessToken', res.data.data);
vm.getUserInfo(callback)
} else {
wx.showToast({
title: res.data.msg,
icon: 'none'
})
}
})
},
//调微信获取用户信息接口
getUserInfo(callback) {
//获取用户的当前设置。返回值中只会出现小程序已经向用户请求过的权限
wx.getSetting({
success: res => {
if (res.authSetting['scope.userInfo']) {
wx.getUserInfo({
success: res => {
// 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
// 所以此处加入 callback 以防止这种情况
if (this.userInfoReadyCallback) {
this.userInfoReadyCallback(res)
}
this.updateUserInfo(res, callback)
},
})
} else {
wx.hideLoading();
//这里是用户点击了拒绝授权的回调
console.log("走了没有授权")
wx.removeStorageSync('accessToken')
}
}
})
},
//更新用户信息
updateUserInfo(res, callback) {
let vm = this
let params = {
encryptedData: res.encryptedData,
iv: res.iv,
rawData: res.rawData,
signature: res.signature
}
restful.wxBodyPost(restful.interfaces.info, params, function (res) {
if (res.data.code == 20000) {
wx.setStorageSync('accessToken', res.data.data.token)
//用户信息存入本地
wx.setStorageSync('userInfo', res.data.data)
vm.globalData.userInfo = res.data.data
// console.log(vm.globalData.userInfo)
callback()
} else {
wx.showToast({
title: '获取用户信息失败',
icon: 'none'
})
}
},false)
},
globalData: {
userInfo: null,
cartGoodsLength: 0, //购物车商品数量
}
})
