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

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

我的思路是：在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` }})

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

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