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.authSettingif(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>

<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.authSettingif(authSetting['scope.userInfo']){_self.status = 1;uni.showToast({icon: 'none',title: '设置成功',duration: 2000});}}})}})} else if (res.cancel) {console.log('用户点击取消');}}});}},components: {}}
</script>

end;

uni-app小程序授权登陆示例相关推荐

微信小程序授权登陆判断+证件照换底色UI设计（第三周）
日期工作内容 2020年8月16日 (因涉及版权问题)图片素材重新查找 2020年8月17日图片上传 2020年8月18日小程序授权判断完善,小程序跳转页面新架构 2020年8月19日证件照尺 ...
小程序php mysql_PHP+TP小程序授权登陆实现
仅供大家参考学习 1.先说明一下官方:为优化用户体验,使用 wx.getUserInfo 接口直接弹出授权框的开发方式将逐步不再支持. 小程序与小游戏获取用户信息接口调整,请开发者注意升级. 2.使用 ...
关于微信小程序授权登陆之后需要在个人信息页展示信息，如微信头像，昵称这件事
开发时使用uniapp进行开发,不过用什么开发都不重要. 在搞完微信授权登陆后,又遇到需要把用户昵称和头像展示在个人信息页的情况,在试了很多方法后,发现了便利的方法. 有想过从数据库获取数据,也想过从 ...
JAVA支付宝小程序授权登陆，并生成二维码（证书方式）
接入准备 https://opendocs.alipay.com/open/284/106001?ref=api 根据文档进行创建小程序.配置相关信息(接口加签方式选择证书) 生成二维码文档https ...
uni.app小程序的ajax封装详细讲解
我懒得说了 //放url相同的片段 const rootUrl = ""// 示例: ajax({ url:'/api/login', param: param, method: ...
php 支付宝小程序授权登陆验签_星巴克“啡快”登陆支付宝小程序，让你“飞快”取到咖啡...
当代年轻人的生活方式是怎样的? 靠地铁通勤,靠咖啡续命早上睁不开眼,咖啡来一杯中午昏昏欲睡,咖啡来一杯晚上熬夜加班,咖啡来一杯喝完这杯,还有一杯 "宁可食无肉,不可早无星" ...
uni.app小程序登录页持久化存储和退出后清除本地缓存
持久化存储在store里面的user.js(自己创建的)中 export default {state: {status: false, //登录的状态,获取数据中status是1,登录成功时状态为 ...
uni.app小程序失焦聚焦，表单验证
<input type="text" placeholder="请输入手机号/邮箱/账号" v-model="username" @f ...
微信小程序授权登陆，解密encryptedData出现乱码问题
前端传过来的encryptedData 用base64_decode解密后出现乱码解决方法: 用get方式传加密的字符串时,接收到以后,字符串里包含的"+"会被替换成" ...

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

authorize.js

必须登陆才能访问的页面

login页面

uni-app小程序授权登陆示例相关推荐

最新文章

热门文章