uniapp结合微信授权登录,兼容h5密码登录

以用户个人中心的授权登录为例
1、通过computed: mapGetters(['isLogin'])获取到isLogin状态,这里的isLogin是指的isLogin: state => !!state.app.token也就是把token强制类型转换成Boolean。

为了方便代码的阅读,以下所有涉及代码的部分都只是一些片段。(只看微信端的直接跳到第3点)

//index.vue,只截取了一段代码
computed: mapGetters(['isLogin']),
//getter.js,vuex状态管理中的getter.js,只截取了一段代码
export default {
   
  isLogin: state => !!state.app.token,
};

2、在页面加载时,判断isLogin的bool值,也即是判断token存在情况,不存在则调用toLogin函数。

toLogin函数内容也只是为了跳转到一个登录界面。假设我们现在是第一次进入微信小程序,那么必然在缓存中找不到token,也就会跳转到常规的登录界面

(后注:这只是针对H5和APP-PLUS端的,小程序端在第3点,只看微信小程序端的话可以跳过这一点)。

//index.vue
import {
    toLogin } from '@/libs/login.js';//调用登录界面
 onLoad: function (options) {
   
	let that = this;
	if (that.isLogin == false){
   
		toLogin();
	}
},

3、微信小程序端是在onShow中判断isLogin的状态,为true则获取用户的信息。但由于在个人中心页面插入了授权登录的组
件。

而这时子组件的created生命周期是先于页面级的onShow,所以会先执行子组件的created生命周期。
uniapp父子组件生命周期:

父beforeCreate
父created
父beforeMount
子beforeCreate
子created
子beforeMount
父onLoad
父onShow
子mounted
父mounted
父onReady

//Auth.vue,授权登录的关键子组件
created() {
   
	this.setAuth();
},
methods:{
   
	setAuth(){
   
		Routine.authorize().then(res=>{
   
			if(res.islogin === false)
				this.setUserInfo();
			else
				this.
  • 0
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值