• 小程序中使用 web-view 嵌入H5程序 localStorage和vuex的选择


    项目背景

    公司有一个项目中, 使用小程序来引流客户, 当客户进来后, 在小程序的页面中 内嵌一个H5的积分商城系统, 让小程序过来的用户可以在积分系统中兑换商品

    解决方案

    这里要解决用户的认证问题,我们的思路是这样的
    小程序 跳转到 h5 的链接中 带上用户的 手机号
    h5得到手机号之后,后台检测用户并使用短信接口,对用户的手机发送认证短信 验证码
    用户收到短信验证码之后,输入验证码,后台得到验证码,验证之后, 使用手机号在后台生成一个token 信息返回给前端
    前端得到 token 之后, 把token 放入缓存中,(这里就有一个选择的问题, 我们是使用 localStorage来存储token,还是使用 vuex )
    以后前端的api请求中 都带上token 就可以得到认证的用户了

    问题

    我们是要用 localStorage 还是使用 vuex?
    我最开始的选择是使用 localStorage
    这里说一下它出再的问题 使用localStorage 把token 记录入缓存之后, 这个缓存不好控制清除的时间, 因为, 在用户访问期间, 我是需要它的, 用户走了之后, 我是要清除它的, 这对程序来说根本不知道该什么时候清除。
    上面的结果导至首页中的 判断会出问题, 用户每次进入首页的时候, 我要让后台发证短信,但是用户操作了 N 个子页面的时候,回到首页,这里又触发了 发送短信接口, 这显然是不行的
    所以,我就 加了一个判断, 如果 localStorage中有 token ,就不发送短信,但是这样又有了新的问题,
    如果一个用户使用完了,关闭了小程序, 10分钟后,又回来打开小程序,这时 localStroage 还是存在的,此时,就不会发送短信了,这与我们的要求 不相符,要求是用户每次进入的时候都要发送短信

    最终使用的 Vuex 解决了上述问题
    vuex 在每次用户进入的时候会初始化, 用户退出的时候,会清空数据, 完美解决问题

    两种技术都些细微的差别,就是这些细微的差别,能更好的解决特定的问题

  • 相关阅读:
    网络间串扰降噪推荐掌握的经验法则
    SpringBoot的自动配置原理
    Flink学习笔记(二):Flink内存模型
    如果再写for循环,我就锤自己了
    《Premiere Pro 2022视频制作案例实战》简介
    【T】03
    CrossOver22可以直接在Mac系统上运行Windows应用
    Mysql热备增量备份与恢复(-)--备份部分
    SpringBoot常用注解释义
    Java Method.invoke()方法具有什么功能
  • 原文地址:https://blog.csdn.net/hjh15827475896/article/details/127773296