前言

最近换工作了,进新公司当然要表现一下,再加上手头上的事情比较多,所以没什么时间写东西了,不过最近写微信里的H5项目的时候遇到一个比较值得写的一个问题,所以就忙里偷闲记录下.

开始

新开发的页面需要接入微信的授权,步骤如下:

1. 拿到用户的appId(当然,这些事都是后后端完成的,前端只请求了一个接口)

2. 前端在拿到appId后,通过这个appid去拿微信授权后的code,https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appId}&redirect_uri=${encodeURIComponent(window.localtion.href)}&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect

3. 在重定向的地址里微信会带上code,前端再拿这个code去换用户的信息.

问题

1. 授权信息只需要拿一次,这类的信息一般不会经常变动,所以不用每次都去拿,但又不能长时间的去保存,不然这个信息又不准确.

2. 我们如何判断已经授权过了,只能通过url里的code有没有去判断,这样就会产生一个问题,如果这个人刷新了这个页面,由于当前的地址里已经带了code,所以就会出现code被重用的情况,这个时候会报错.

3. 如果某个用户打开了页面,直接把地址复制出来给另一个人访问,这个时候会出跟上面问题一样的情况(有些人还真就是这么干的),这种情况和上面的情况有点类似,但为什么我要单独出来,因为这条在解决的时候和上面是不同的

解决方案

1. 针对授权信息做带时间戳的缓存,一般存一个星期比较合适.

2. 需要授权的时候,也就是需要有个code,所以我们在代码里判断如果url里有code了,就不再去走微信的授权流程.

3. 如果光判断没有code就不走授权流程的话会有一个问题,就是某一个人打开了页面,直接复制地址给第二个人去用,他一进来,地址栏里有code,这个时候如果再这样判断,就有问题了,这个code已经被用过了,所以是判断不到这个code是否是有效的,我的解决方案是:

   1. 在正常流程走通时,用localstroge把这个code保存下来.

   2. 在每次走流程之前,从localStroge里取这个code,如果没有,我就认为他是第一次进来的,他的code无效,把这个code存下来,再重新走一次授权,拿新code,再走完流程后,把新code再写到localStroge里去,以备下次使用.

   3. 这个时候还有一个问题,如果他刷新当前页面,这个时候本的code有,url里的code也有,所以这个时候需要再加一个判断,如果本地的code和url里的code一样,我就认为你这是刷新,我重新走授权,摒弃掉之前的code.

结束

以上就是我在这个项目里总结的关于应对授权的一些心得和方案,希望对大家有帮助,有更好的思路也可以评论留言一波.