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

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

  • 相关阅读:
    【自动驾驶地图】OpenDrive协议总结(上)
    vscode软件安装包下载安装教程
    第十三届蓝桥杯省赛 最优清零方案题解
    JavaEE初阶——多线程(七)——定时器
    Python爬虫过程中DNS解析错误解决策略
    java类的学习
    Shiro反序列化漏洞原理&代码分析(3)
    Three.js一学就会系列:02 画线
    【DBC专题】-8-经典CAN2.0 DBC快速切换为CANFD DBC
    Apache Spark 的基本概念和在大数据分析中的应用 103.219.31.8
  • 原文地址:https://blog.csdn.net/hjh15827475896/article/details/127773296