Vue遇到微信授权登录的一些场景坑和思考

最近，接手一个小的PC商城项目，使用微信扫码授权登录，商城部分有些内容针对游客、用户和会员以及店铺，分别作出不同的展示，当退出登录时，清除所有信息，包括本地存储、pinia，问题就发生在退出账号重新登录，有一部分依赖于pinia的数据没有生效，经过检查发现是重定向后，本该初始化的store没有执行，下面详细说明这个故障是如何发生的，以及解决方案。

微信授权登录过程介绍

这一部分针对于没有做过第三方授权登录的小伙伴，作下简单介绍，一般来说，引入三方jssdk或者库，根据文档调用对应方法，传入开发者的信息（appid、redirect_uri、scope、STATE等），以微信网页授权为例，在被指定的dom容器中会填充二维码，当用户扫码登录后，会返回一个code拼接在填写的重定向地址上，应用可以利用这个code进行注册或者查询用户的功能，然后保存相关信息，通常会有一个二次重定向（可以关注下地址栏，整个过程：无code-有code-无code）。

商城主页功能

用户登录后，使用code查询用户信息，确认是否是会员等信息，并存本地或者持久化的存储对象，问题就在这里，因为地址栏的code只能使用一次查询，之后重定向会移除多余的参数，所以查询用户信息仅在登录后执行一次，所有对于路由参数的监听执行是有限制的，而有一些初始化的操作是丢在了生命周期onMounted中，vue路由导航使用router.push,也有使用router.replace的，在实现功能目的上几乎没区别，而之前的开发者可能没注意到，使用上面两个API，如果当前页面重定向，只是更改了参数，默认路由是不会重新挂载，你只能通过路由钩子去执行一些初始化的操作代码，而我们正常访问主页的时候都是没有参数的，如果都执行，显然多了额外消耗。

如何解决

了解问题产生的关键要素，分别从不同角度解决此场景问题。

1. 其实我们想要的无非就是页面重新挂载，那么让它reload即可，但是要注意，一定要在router.push之后的一段时间执行，立即执行可能面临地址栏参数code还未移除的情况；
2. router.push 还有额外参数，force，设置为true后，即使是当前页面也会重新挂载；
3. 此方法较为人性化，就是无论是哪个页面进行扫码登录，重定向页面需要前端单独设置，并配置好，比如商城主页是 home页面，那么重定向为一个auth?code=xxx的空白过渡页，在这个页面中用code查询完用户信息并保存后，在使用router.push到主页home，这样home页面也会重新挂载，执行所有代码

总结

工作中会遇到很多小问题，作为开发者第一时间解决问题肯定优于一切完美方案，但是空下来还是要多找深层原因，只有这样才可能找出最完美的解决方案。