公司有一个项目中, 使用小程序来引流客户, 当客户进来后, 在小程序的页面中 内嵌一个H5的积分商城系统, 让小程序过来的用户可以在积分系统中兑换商品
这里要解决用户的认证问题,我们的思路是这样的
小程序 跳转到 h5 的链接中 带上用户的 手机号
h5得到手机号之后,后台检测用户并使用短信接口,对用户的手机发送认证短信 验证码
用户收到短信验证码之后,输入验证码,后台得到验证码,验证之后, 使用手机号在后台生成一个token 信息返回给前端
前端得到 token 之后, 把token 放入缓存中,(这里就有一个选择的问题, 我们是使用 localStorage来存储token,还是使用 vuex )
以后前端的api请求中 都带上token 就可以得到认证的用户了
我们是要用 localStorage 还是使用 vuex?
我最开始的选择是使用 localStorage
这里说一下它出再的问题 使用localStorage 把token 记录入缓存之后, 这个缓存不好控制清除的时间, 因为, 在用户访问期间, 我是需要它的, 用户走了之后, 我是要清除它的, 这对程序来说根本不知道该什么时候清除。
上面的结果导至首页中的 判断会出问题, 用户每次进入首页的时候, 我要让后台发证短信,但是用户操作了 N 个子页面的时候,回到首页,这里又触发了 发送短信接口, 这显然是不行的
所以,我就 加了一个判断, 如果 localStorage中有 token ,就不发送短信,但是这样又有了新的问题,
如果一个用户使用完了,关闭了小程序, 10分钟后,又回来打开小程序,这时 localStroage 还是存在的,此时,就不会发送短信了,这与我们的要求 不相符,要求是用户每次进入的时候都要发送短信
最终使用的 Vuex 解决了上述问题
vuex 在每次用户进入的时候会初始化, 用户退出的时候,会清空数据, 完美解决问题
两种技术都些细微的差别,就是这些细微的差别,能更好的解决特定的问题