• 小程序中使用 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 在每次用户进入的时候会初始化, 用户退出的时候,会清空数据, 完美解决问题

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

  • 相关阅读:
    Chrome开发工具与js加密
    1339 - Ancient Cipher (UVA)
    JAVA:List 与 数组 相互转换
    springboot 集成webSocket
    ELK 企业级日志分析系统
    北邮22级信通院数电:Verilog-FPGA(7)第七周实验(2):BCD七段显示译码器(关注我的uu们加群咯~)
    深入理解Redis集群模式、协议、元数据维护方式
    Java抽象类
    Java——JDBC连接池复习(图解模式)
    产品外观设计有哪些表面处理工艺
  • 原文地址:https://blog.csdn.net/hjh15827475896/article/details/127773296