首先,是封装api啦。项目根目录下,创建api文件夹,api下面创建request.js文件
const baseUrl = '';//这是根域名
// 不带token请求
const httpRequest = (opts, data) => {
uni.onNetworkStatusChange(function(res) {
if (!res.isConnected) {
uni.showToast({
title: '网络连接不可用!',
icon: 'none'
});
}
return false
});
let httpDefaultOpts = {
url: baseUrl + opts.url,
data: data,
method: opts.method,
header: opts.method == 'get' ? {
'X-Requested-With': 'XMLHttpRequest',
"Accept": "application/json",
"Content-Type": "application/json; charset=UTF-8"
} : {
'X-Requested-With': 'XMLHttpRequest',
'Content-Type': 'application/json; charset=UTF-8'
},
dataType: 'json',
}
console.log("请求参数是",httpDefaultOpts)
let promise = new Promise(function(resolve, reject) {
uni.showLoading({
title:"",
duration:1000,
icon:"none"
})
uni.request(httpDefaultOpts).then(
(res) => {
console.log("请求结果是",res[1].data.data)
resolve(res[1].data.data)
uni.hideLoading()
}
).catch(
(response) => {
reject(response)
uni.hideLoading()
}
)
})
return promise
};
//带Token请求
const httpTokenRequest = (opts, data,isShowLoading = true) => {
uni.onNetworkStatusChange(function(res) {
if (!res.isConnected) {
uni.showToast({
title: '网络连接不可用!',
icon: 'none'
});
}
return false
});
let token = uni.getStorageSync('token');
// hadToken()
if (token == '' || token == undefined || token == null) {
uni.showToast({
title: '账号已过期,请重新登录',
icon: 'none',
duration:1000,
});
} else {
let httpDefaultOpts = {
url: baseUrl + opts.url,
data: data,
method: opts.method,
header: opts.method == 'get' ? {
'accessToken': token,
'X-Requested-With': 'XMLHttpRequest',
"Accept": "application/json",
"Content-Type": "application/json; charset=UTF-8"
} : {
'accessToken': token, //把token设置成请求头,这个要看后端确定是什么字段
'X-Requested-With': 'XMLHttpRequest',
'Content-Type': 'application/json; charset=UTF-8'
},
dataType: 'json',
}
let promise = new Promise(function(resolve, reject) {
console.log("请求参数是,",httpDefaultOpts)
if(isShowLoading) {
uni.showLoading({
title:"请求中",
duration:1000,
icon:"none"
})
}
uni.request(httpDefaultOpts).then(
(res) => {
if(isShowLoading) {
uni.hideLoading()
}
if (res[1].data.code == 200) {
console.log("经过处理的请求结果是什么",res[1].data.data)
resolve(res[1].data.data)
} else {
reject(res[1].data.message)
uni.showToast({
title: "请求出现了错误",
icon: 'error',
duration:1000
})
}
}
).catch(
(response) => {
reject(response)
}
)
})
return promise
}
// let token = uni.getStorageSync('token')
//此token是登录成功后后台返回保存在storage中的
};
const hadToken = () => {
let token = uni.getStorageSync('token');
if (token == '' || token == undefined || token == null ) {
uni.showToast({
title: '账号已过期,请重新登录',
icon: 'none',
});
return false;
}
return true
}
export default {
baseUrl,
httpRequest,
httpTokenRequest,
hadToken
}
接着在main.js中把这些方法引入,并设置成全局对象的属性
import Request from './api/request.js'
uni.$httpRequest = Request.httpRequest
uni.$httpTokenRequest = Request.httpTokenRequest
在首页引入这个api文件,使用hadToken方法,判断有没有token,如果没有token,就要重新登录,
const Request = require('../../api/request.js')
先请求微信的登录接口,拿到一个code之后向后端发送请求,后端会返回token,openId,等信息,token存储到本地,然后openId是用户的唯一标识。然后携带这些信息跳转到登录界面。
在登录界面,存储好携带过来的openId信息,接着由用户点击授权登录之后,把code发送给后端,后端就可以拿到手机号了,进而判断是不是公司的内部人员。
<button class="margin-top-lg bg-gradual-blue" type="primary" lang="zh_CN" open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumber">授权登录</button>
// 这是获取手机号的code
onGetPhoneNumber(e) {
var that = this
if (e.detail.errMsg == "getPhoneNumber:fail user deny") { //用户决绝授权
uni.showToast({
duration: 1000,
title: "拒绝了授权",
icon: "error"
})
uni.clearStorageSync();
//因为上面已经把token给清空了,用户拒绝授权之后,重新生成一个token,不然会过期。
uni.login({
provider: 'weixin',
success: loginRes => {
uni.$httpRequest({
url: '/getOpenid',
method: 'get'
}, {
code: loginRes.code
})
.then(res => {
that.openid = res.openid;
that.unionid = res.unionid
uni.setStorage({
key: 'token',
data: res.userInfo.accessToken
})
})
.catch(err => {
console.log(err)
});
}
});
return
}
//如果用户点击了同意获取手机号,那么就会从这个onGetPhoneNumber的事件响应函数里面获得事件对象,从事件对象中拿到一个code,这个code要发送给后端,是获取手机号的关键信息,还有openid也要发送。
uni.$httpTokenRequest({
url: '/getTel',
method: 'get'
}, {
code: e.detail.code,
openid: this.openid,
unionid: this.unionid
})
.then(res => {
that.tel = res.phone_info.phoneNumber
uni.setStorage({
key: "tel",
data: that.tel
})
console.log(res, "返回结果是什么")
if (res.userInfo == null || res.userInfo.tel == undefined || res.userInfo.tel == "") {
uni.showToast({
title: "你没有访问权限",
success: function() {
uni.clearStorageSync();
uni.navigateBack()
// uni.clearStorage('token')
}
})
} else {
//是内部用户的话,就把用户信息存储到本地
let user_id = res.userInfo.id
let role_id = res.userInfo.role_id
uni.$httpTokenRequest({
url: "/getUserInfo",
method: "get"
}, {
user_id: res.userInfo.id
}).then(function(res) {
res.role.user_id = user_id
res.role.role_id = role_id
res.role.username = res.username
uni.$userInfo = res.role
uni.setStorage({
key: "userInfo",
data: JSON.stringify(res.role)
})
})
uni.showToast({
title: "登录成功",
duration: 1000,
success: function() {
setTimeout(function() {
uni.reLaunch({
url: '/pages/home/home'
});
}, 1000)
}
})
}
})
.catch(err => {
console.log(err);
uni.showToast({
title: "登录出现了错误",
duration: 1000
})
});
},
这样就算是登录成功了,来看一下效果。
1 先通过login方法,获取code,发送给后端,拿到openid和token ,把token存储到本地
2 接着授权登录,拿到另一种code,这个code结合openId发送给后端就可以用来获取手机号和用户信息了。