uni-app小程序授权登陆示例

我用的是uni-app，和原生略有差别，但差别不大。
使用promise，我也是初学，不合理处请包涵。

authorize.js

这是个类库，所有的登陆相关都在这里，我没有细化分开。

//authorize.js
var baseUrl = "https://xxxx.com";

// 同步获取storge
const getStorageSync = (key)=>{
	try {
	    const value = uni.getStorageSync(key);
	    if (value) {
	        return value;
	    }
		return false;
	} catch (e) {
	    console.log('获取storge失败')
	}
	return false;
}

// 同步存储storge
const setStorageSync = (key,value)=>{
	try {
	    uni.setStorageSync(key, value);
		return true;
	} catch (e) {
	    console.log('存储storge失败')
	}
	return false;
}

// 检测sessionkey是否过期 1未过期 0已过期
const checkSessionKey=()=>{
	
    return new Promise((resolve,reject) => {
		const user = getStorageSync('user');// 用户缓存信息
		if(user){
			uni.checkSession({
			    success() {
					resolve(user);  //状态未过期
				}
			    ,fail() {
					resolve(false); //状态已过期
				}
			})
		}else{
			resolve(false);  //未存贮
		}
    })
}

// 登录授权
const login = (params)=> {
	
	return new Promise((resolve,reject) => {
		authDo(params).then(res=>{
			if ( res.statusCode && res.statusCode != 200 ) {
				reject('网络错误，请检查一下网络');return;
			}
			if (res.data.code != 0) {
			    reject('登录失败');return;
			}
			let user = res.data.data.user;
			uni.setStorageSync('user', user);//储存用户信息到本地
			resolve(user);
		})
	})
}

// 保存用户信息 write by self
const authDo = function(params) {
	return new Promise(function (resolve, reject) {
			uni.request({
				url: baseUrl +'xcx/user/login',
				data: params,
				method:'POST',
				header: {
	        		'content-type': 'application/x-www-form-urlencoded'
				},
				success: function(res){ resolve(res) },
				fail:function(){ reject("保存用户信息失败") }
			})
	})
}

// 获取服务商信息 uni-app是聚合开发 所以先获得是什么小程序 原生的不用这个
const getProvider = () => {
    return new Promise((resolve, reject) => {
        uni.getProvider({
            service: 'oauth', //服务类型  登录授权
            success: function(res) {resolve(res.provider[0])},
            fail:function() { reject("获取服务商失败") }
        });
    })
}

// 获取code
const getCode = provider => {
    return new Promise((resolve, reject) => {
		if (!provider) { reject("获取缺少provider参数") }
        uni.login({
            provider: provider,
            success: function(loginRes) {
                if (loginRes && loginRes.code) { resolve(loginRes.code) } else { reject("获取code失败") }
            },
			fail:function(){ reject("获取code失败")}
        });
    })
}

// 是否开启了获取用户名授权 当用户一开始拒绝了 需再次提醒授权
const getSetting = function() {
    return new Promise((resolve,reject) => {
        uni.getSetting({
            success:function(res) {
                let authSetting=res.authSetting
                if(authSetting['scope.userInfo']){resolve(1);return;}//授权成功
                if(authSetting['scope.userInfo']===false){resolve(0);return;}//拒绝授权
                resolve(2) //2未操作
            },
            fail:function() { reject("获取用户授权失败") }
        })
    })
}

// 获取用户信息
const getUserInfo = (provider)=>{
	return new Promise( (resolve,reject)=>{
		if (!provider) { reject("获取缺少provider参数");return; }
		uni.getUserInfo({
			provider: provider,
			success: (detail) => {
				if(detail.iv != ''){
					resolve(detail);
				}else{
					reject(0); //用户点击拒绝授权
				}
			}
			,fail: (error) => {
				reject(0); //如果用户拒绝过授权 直接走fail
			}
		});
	})
}

export default {getStorageSync,setStorageSync,getProvider,getSetting,checkSessionKey,getCode,login,getUserInfo}

必须登陆才能访问的页面

**js**

```javascript
<script>
	import authorize from '@/common/authorize.js';
	var _self;
	export default{
		data() {
			return {
				userinfo:[]
			}
		},
		onLoad() {
			_self = this;
		},
		onShow(){
			this.init();
		},
		methods: {
			init() {
				//获取登录态
				authorize.checkSessionKey().then(user=>{
					if(user){
						console.log('已登录');
						console.log(user);
					}else{
						uni.showModal({
							title: '温馨提示',
							content: '此时此刻需要您登录喔~',
							confirmText: "登录",
							cancelText: "取消",
							success: function (res) {
								//点击确定
								if (res.confirm) {
									uni.navigateTo({
										url:"/pages/my/login"
									});
								}else{
									//点击取消
									uni.switchTab({
										url: '/pages/index/index',
										success: function () {
											console.log('switch success');
										},
										fail: function (err) {
											console.log('switchTab fail', err);
										}
									});
								}
							}
						});						
					}
				})
		},
		components: {
		}
	}
</script>

login页面

如果用户之前是否拒绝过授权，需要拉起授权页面。否则正常登陆。

页面

<button  type="primary" hover-start-time="100" @click="openSetting" v-if="setting==0">登录</button>
<view v-else><button  type="primary" hover-start-time="100"  @tap="getuserinfo">登录</button></view>

js

<script>
	import authorize from '@/common/authorize.js';
	var _self;
	export default{
		data() {
			return {
				setting: 2 //0拒绝授权 1已经授权 2未操作 
			}
		},
		onLoad() {
			_self = this;
		},
		onShow(){
			//获取授权状态
			authorize.getSetting().then(setting=>{
				this.setting = setting;
				console.log('setting',this.setting); // 0拒绝 or 1同意 or 2未操作
			})
		},
		methods: {
			getuserinfo:function() {
				uni.showLoading({
					title: '登录中..',
					mask: true
				});
				let provider_code = {};
				authorize.getProvider().then(provider=>{
					provider_code.provider = provider;
					return authorize.getCode(provider);
				}).then((code)=>{
					provider_code.code = code;
					console.log(provider_code);
					return Promise.resolve(provider_code.provider);
				}).then(provider=>{
					return authorize.getUserInfo(provider);
				}).then(e=>{
					let params = {code:provider_code.code,encryptedData:e.data,iv:e.iv,head_url:e.userInfo.avatarUrl,gender:e.userInfo.gender,nickname:e.userInfo.nickName};
					return authorize.login(params);
				}).then(user=>{
					uni.hideLoading();
					uni.showToast({
						icon: 'success',
						title: '登录成功',
						duration: 2000
					});
					// 返回上一页面
					setTimeout(function() {
						uni.navigateBack({delta: 1});
					}, 1000);
				}).catch(err=>{
					uni.hideLoading();
					//拒绝授权
					if(err == 0){
						_self.status = 0;
						uni.showToast({
							icon: 'none',
							title: '您已拒绝授权，请重新登陆授权我们使用您的公开信息',
							duration: 2000
						});
						return;
					}
					uni.showToast({
						icon: 'none',
						title: '登陆失败，请稍候再试',
						duration: 2000
					});
					console.log(err);
				})
			},
			// 拉起授权
			openSetting: function() {
				uni.showModal({
					title: '提示',
					content: '您已拒绝我们使用您的公开信息，请点击确定重新授权进行登录',
					confirmText: '去设置',
					success: function(res) {
						if (res.confirm) {
							uni.openSetting({
								success(res) {
									uni.getSetting({
									    success(res)
										{
									        let authSetting=res.authSetting
									        if(authSetting['scope.userInfo'])
											{
												_self.status = 1;
												uni.showToast({
													icon: 'none',
													title: '设置成功',
													duration: 2000
												});
											}
									    }
									})
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			}
		},
		components: {
		}
	}
</script>

end;