以用户个人中心的授权登录为例
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.