首先,是封装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')

uniapp profile 和 私钥证书 下载 uniapp授权登录步骤_小程序

 先请求微信的登录接口,拿到一个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存储到本地

uniapp profile 和 私钥证书 下载 uniapp授权登录步骤_javascript_02

 2 接着授权登录,拿到另一种code,这个code结合openId发送给后端就可以用来获取手机号和用户信息了。

uniapp profile 和 私钥证书 下载 uniapp授权登录步骤_小程序_03