第三方企业微信登录实践

最近项目有个需求是企业微信扫码登录，看过官方文档后感觉挺简单的，然而还是踩了好多坑，折腾了好久。。
在此记录下遇到的坑。

URI的编码

官方文档的参数说明是这样的

image.png

其中特别说明 'redirect_uri' 是需要进行Urlcode，我就天真地用window.encodeURI来编码，当时的我并不知道还有window.encodeURIComponent，更别说两者的区别了，因此就引发了一系列的问题！

• 扫码成功后的重定向地址
  因为用户登录后的一系列操作，比如获取token、获取用户权限菜单等，都是在Login组件里进行的，因此我希望重定向的地址也是/login路由。
  然而，重定向地址是: http://www.xxx.com/?code=xxx&state=xxx&appid=xxx#/login
  重点是querystring的位置，当时一直很纳闷，后来查阅了URI的标准，发现其标准规定querystring就是在锚点('#')之前的！
  然后，这个url地址是一个空白页，也就是说未匹配到任何路由？
• window.location.href重定向的问题
  由于加了一级路由后重定向到空白页，因此我以为redirect_uri参数只识别域名(比较天真)，就去掉了路由，将重定向地址变为: http://www.xxx.com
  然后项目中路由的配置为 '/' 会被 redirect 到 '/index'，然后/index路由对应的页面有n个请求，axios拦截器又会根据是否登录进行拦截，若未登录，则用window.location.href重定向到http://www.xxx.com/#/login
  按道理逻辑是这样，但结果是axios拦截会失败，也就是后面的请求的还会继续进行，并且window.location.href = 'http://www.xxx.com/#/login' 这句代码也执行了，最终导致的结果就是页面会一直刷新且弹出错误警告。
  但是，我将querystring加上，也就是 window.location.href = 'http://www.xxx.com/?code=xxx&state=xxx&appid=xxx#/login'，也就就能正常跳转！（至今还不清楚其中的原因，还是太菜了）

最后，将encodeURI改成了encodeURICompoent，一切就正常了!
重定向的地址变成了: http://www.xxx.com/#/login?code=xxx&state=xxx&appid=xxx
注意，querystring加在了路由的后面，也就是此时的querystring的并非URI标准中的querystring，而是vue-router中的querystring。而改变路由的querystring，是不会刷新页面的，只会刷新组件，因此，只要在watch中监听this.$route.query的变化，加上一些逻辑判断即可！

  watch: {
        ['$route.query'] (val) {
            if (Object.keys(val).length) {
                this.query = val;
                this.qrcodeLogin();
            }
        }
   }