评论

登录控制方案总结

小程序内对于需要登录才能访问的页面,如果用户未登录,则需要引导用户进行登录

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中只是判断本地存储的登录标识,如果请求返回结果显示当前用户未登录或登录已过期,则直接刷新当前页面

最后一次编辑于  2021-12-09  
点赞 2
收藏
评论

1 个评论

  • (o˘д˘)o明
    (o˘д˘)o明
    发表于移动端
    2022-06-08
    对的
    2022-06-08
    赞同
    回复
登录 后发表内容