1,单独登录页面进行登录
描述:当判断到用户未登录,跳转页面进行登录。
处理点:1.1,路由跳转时判断,对跳转api进行封装(https://developers.weixin.qq.com/community/develop/article/doc/000aac3868c8e003252d21ea75b413),之后在jump方法里判断本地存储的登录标识是否已登录,如果未登录,则跳转至登录页
1.2,onLaunch里进行判断,1.1里只有进行路由跳转时才会判断,如果用户直接进入需要登录的页面,则一开始就需要进行判断
1.3,ajax返回结果判断,1.1和1.2只是根据本地存储判断,实际是否已登录是以后端服务接口返回结果为准,如果接口返回未登录,则跳去登录页。需要注意的是,如果同时发送多个接口,那可能会多次跳转登录页,一种是在ajax写判断,另一种则在jump里判断处理好,只要跳转页和当前页是同一页,则直接return。
2,弹窗登录
描述:判断到用户未登录,在当前页弹窗引导用户进行登录
处理点:2.1,封装组件<login-box />,提供check方法,在页面内引入组件,所有需要做登录判断的操作,调用check方法,执行操作写在回调里。check方法里判断如果未登录,则把传入的回调先存起来,弹出登录弹窗,登录后执行回调,如果已登录,则直接执行传入函数。
check (callback) {
if (未登录) {
this.visible = true;
this.checkCallBack = callback;
} else {
callback && callback();
}
}
常见判断如页面onLoad完发送请求获取数据
onLoad () {
this.$refs.loginBox.check(() => {
doSomething1()
doSomething2()
});
}
或者点击进行跳转或其他操作
// template --------
<button @click="loginJump('/pages/goods/detail')">去详情</button>
// script ---------
loginJump (url) {
this.$refs.loginBox.check(() => {
jump(url)
});
}
2.2,ajax返回结果判断,2.1中只是判断本地存储的登录标识,如果请求返回结果显示当前用户未登录或登录已过期,则直接刷新当前页面