vue href跳转_配合Thinkphp,让Vue完美支持微信授权,走出开发大坑

论坛 期权论坛 编程之家     
选择匿名的用户   2021-6-2 15:49   3918   0

冰河这几天刚接手一个移动端项目,因为项目时间充足,而且也没有SEO的要求,就想用vant来开发,因为程序需要设置微信公众号支付,而且还有获取微信用户信息,那么就避免不了奖Vue+php连接起来。

47de861a89004954d8f768b9486a074d.png

我的思路是:在localStorage中加入一个项wxcode,初始是没有的,这一项是通过php回传后加入的,然后路由中判断localStorage是否存在wxcode,没有的话就跳转到php进行授权获取,然后php再跳转到我们的vue项目中的某个路径中,在url中携带我们的wxcode,vue接收到后,就加入到localStorage,然后这个wxcode就可以封装到axios中放到header中使用,请求php验证即可。

路由的beforeEach中做如下改动

router.beforeEach((to, from, next) => {  //我在router中加入了auth-index,用来接收php回传的信息 if (to.path === '/auth-index') {   //接收到了wxcode就交给localStorage localStorage.setItem('wxcode', to.query.wxcode)   //然后跳转到sessionStorage中存下来之前要访问的页面 next({ path: sessionStorage.getItem('wxRedirectUrl') }) return false } const wxUserInfo = localStorage.getItem('wxcode')   //这里判断一下localStorage是否有值,没有的话,执行下方的内容 if (!wxUserInfo) { sessionStorage.setItem('wxRedirectUrl', to.fullPath) const appId = '这里填写你的微信appid' const redirectUrl = encodeURIComponent('http://你的域名/Init/Weixin/Auth') window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appId}&redirect_uri=${redirectUrl}&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect` }})
542c8902ea9c9d27695c4e153fa03e93.png

然后,我们看下tp是如何来写的

925e74cccf9c8688158572f148e4f55a.png

这里仅截取了一部分的源码,我是将微信返回的信息存入数据库,然后通过uuid存入到数据库,将这个uuid返回到客户端,这样,vue发起请求带着wxcode,我通过数据库查询验证uuid的有效性,就可以知道是哪个用户了

815721e5c544c84d09b515b40dc18861.png
分享到 :
0 人收藏
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

积分:3875789
帖子:775174
精华:0
期权论坛 期权论坛
发布
内容

下载期权论坛手机APP