uni-app -- 授权获取个人信息-登录注册流程

每一个你不满意的现在，都有一个你没有努力的曾经

在写小程序时，有时不授权获取信息也能获取到，但有时就会出现报错问题。
那么，怎么一个流程才是正确的登录流程呢？

文章以快手小程序 授权获取个人信息为例

1. 梳理思路

要注册登录，首先就要获取到个人信息。
要获取到个人信息，就要用户先授权
如果首次授权拒绝了，如何再次引导授权

2. 步骤拆分

如果着急的同学，可以直接看2.3 引导用户再次授权部分

2.1 获取用户当前获取权限的状态

getSet() {
	uni.getSetting({
		success(getRes) => {
			console.log('获取到的权限的状态', getRes)
		}
	})
}

打印的日志如图：

可以看到，默认都是undefined，即用户没有授权的情况。

2.2 获取个人信息，让用户进行授权

methods: {
	// 获取授权状态
	getSet() {
		let _this = this;
		uni.getSetting({
			success(getRes) {
				console.log('获取到的权限的状态', getRes)
				// 如果值为true，即代表已经授权
				if (getRes.authSetting['scope.userInfo']) {
					// 已经授权，直接注册登录
				} else {
					// 尚未授权，前往授权
					_this.auth()
				}
			}
		})
	},
	// 进行授权
	auth() {
		console.log('需要授权')
		uni.authorize({
			scope: 'scope.userInfo',
			success(authRes) {
				console.log('成功授权', authRes)
				uni.getUserInfo({
					desc: '我要获取你的信息!',
					success: function(userRes) {
						console.log('获取个人信息成功', userRes)
					},
					fail(err) {
						console.log('获取个人信息失败', err)
					}
				})
			},
			fail(err) {
				console.log('拒绝授权', err)
			}
		})
	},
}

首次授权操作，如果用户选择拒绝授权，将打印日志如下:

2.3 引导用户再次授权

methods: {
	// 获取授权状态
	getSet() {
		let _this = this;
		uni.getSetting({
			success(getRes) {
				console.log('获取到的权限的状态', getRes)
				console.log('获取权限状态', getRes.authSetting['scope.userInfo'])
				// 如果值为true，即代表已经授权
				if (getRes.authSetting['scope.userInfo']) {
					// 已经授权，直接获取个人信息
					_this.getProfile()
				} else if (getRes.authSetting['scope.userInfo'] == undefined) {
					// 值为undefined 代表是首次进行授权操作
					// 尚未授权，前往授权
					_this.auth()
				} else {
					// 值为false 代表是首次授权拒绝后再次打开的操作
					// 引导再次授权
					uni.showModal({
						title: '授权',
						content: '需要授权获取个人信息,是否前往授权设置？',
						success: function(showRes) {
							// 如果确认去授权
							if (showRes.confirm) {
								return uni.openSetting({
									success(openRes) {
										openRes.authSetting['scope.userInfo'] = true;
										_this.getSet();
									}
								})
							}
						}
					})
				}
			}
		})
	},
	// 进行授权
	auth() {
		let _this = this;
		console.log('需要授权')
		uni.authorize({
			scope: 'scope.userInfo',
			success(authRes) {
				console.log('成功授权', authRes)
				_this.getProfile()
			},
			fail(err) {
				console.log('拒绝授权', err)
			}
		})
	},
	//获取个人信息
	getProfile() {
		uni.getUserInfo({
			desc: '我要获取你的信息!',
			success: function(userRes) {
				console.log('获取个人信息成功', userRes)
				//  前往注册、登录即可
			},
			fail(err) {
				console.log('获取个人信息失败', err)
			}
		})
	}
}

再次调用getSet()
打印出的日志如图：

此时会看到引导再次授权的弹窗

点击确定，就会跳转至授权页面

授权成功回来，会再次打开获取个人信息的弹窗

此时可以看到授权状态为

注意：此时逻辑走的是第一种情况，即：

此时就可获取到个人信息

再之后，就可执行后续登录注册的逻辑了