vue微信授权解决方案

更新，请看最新解决方案===>>>微信授权解决方案后台Vue分离前后端开发微信授权2018-08-14更新时隔四个月第一次更新，因为重构了项目接触到微信授权后，思路比以前清晰多了。我会重新编辑整个文章场景app分享产品到微信朋友圈或者分享给微信好友。当用户点击页面时，会使用微信授权登录，获取用户信息。问题：没有固定的h5应用首页，回调无法到达索引。授权后，重定向的url有参数，而且很长。我很无聊。在开发过程中，我尝试了很多方法。踩坑已经不足以形容我的心情了。可以说，每一次都是跳得很好的体验。1、我一开始尝试的方式是前端请求微信连接，返回code，然后用code请求后台接口获取token。后来看到别人的博客说这个方法不好。最好是直接请求后台接口，然后后台返回url用于跳转，所以采用最传统的方式，后台返回url，前台跳转。2.这时候出现了问题。微信授权需要跳过跳过。最后，我第一次点进去的时候又回到了那个链接。我从网上查了下解决办法，把链接本身作为redirect_uri的参数，大概就是Thislookslikehttps://open.weixin.qq.com/connect/oauth2/authorizeappid=xxxxxxxxxxxxxxxxxxx&redirect_uri=*www.admin?http://www.xxx.com/h5/product*&response_type=code&scope=snsapi_userinfo&state=STATE&connect_redirect=1#wechat_redirect但是，我们的前台链接是这样的，有参数，超长，什么？微信可能接受不了我这么丑。/(ㄒoㄒ)/~~http://www.xxx.com/h5/product?id=6RedfM5O4xeyl0AmOwmyipkHr8AQCv-hYXZVAIFTwDXOsWSKqgu3VaCmaKSerBnacvWuzO3Zwdf8y%2F2K2lvqkluV6Ane4LCAKyPU2tPAPj%2FMF6F6xkzp27GqqpNya7HbdEA34qGQJvHIA9tlIMkeEWid1112b8oZuP3FQBwU%2F%2FMaSrovzQP6LlzWamyPnv0vMizu8uh0ItpJOQUV1m%2FtemF3U9KuHo8rXCw%3D最终放弃了这个方案3.考虑如何重定位我的前台地址，拿到token。接下来是我现在使用的方法。还是有很多bug。先分享一下我的方法。稍后我会优化它或者有更好的方法来修改它。main.js中路由全局钩子判断本地是否有user_token，即微信授权后返回的token，如果没有，且当前路由不是author（专门为授权创建的页面），则保存当前url，如www.xxx.com/h5/product?id=6RedfM5O4xeyl0AmOwm，然后输入author。那么如果本地有token，也就是用户之前对token进行了授权，vuex中没有用户信息，那么我就获取用户信息保存到vuex中。这里遇到的一个问题是token会过期，所以我就删了。本地user_token,window.localStorage.removeItem("user_token");刷新页面router.go(0);这个时候没有token就再去。第一版方法router.beforeEach((to,from,next)=>{//第一次进入项目lettoken=window.localStorage.getItem("user_token");if(!token&&to.path!="/author"){window.localStorage.setItem("beforeLoginUrl",to.fullPath);//保存用户输入的urlnext("/author");returnfalse;}elseif(token&&!store.getters.userInfo){//获取用户信息接口0);返回假;});}next();});2018-08-14方法二版的不同之处在于，跳转判断是从author.vue中取出来的，放在了这里。逻辑其实很简单，有token获取信息，没有token跳转授权router.beforeEach((to,from,next)=>{consttoken=window.localStorage.getItem('user_token')if(token){if(to.path==='/author'){next({path:'/'})}else{store.dispatch('GetUserInfo',{user_token:token}).then(res=>{//拉取用户信息next()})}}else{if(to.path!=='/author'){//保存用户入口urlif(to.path==='/shop'||to.path==='/product'){window.localStorage.setItem('authUrl',to.fullPath)//保存用户输入的url}store.dispatch('GetAuthUrl').then(res=>{//这里返回的是后台拼接的微信授权地址，前台也可以拼接。跳转到微信授权窗口.location.href=res.data.url//https://open.weixin.qq.com/connect/oauth2/authorize?appid=aaaaa&redirect_uri=后端java或php地址&response_type=code&scope=snsapi_userinfo&state=STATE&connect_redirect=1#wechat_redirect})}else{next()}}})下面是进入author.vue的逻辑。第一次输入author，www.xxxx.com/h5/author，判断链接是否有token参数，如果没有则去微信授权，然后后台会重定向回来并携带token，如：www.xxxx.com/h5/author?token=xxxxxxxxx&msg=200GetQueryString方法mixin.jsexportconstGetQueryString=name=>{varurl=newRegExp("(^|&)"+name+"=([^&]*)(&|$)");varnewUrl=window.location.search.substr(1).match(url);if(newUrl!=null){returnunescape(newUrl[2]);}else{返回错误；}};第二个版本只是用于后台获取参数返回作者页面。如果参数获取成功，会跳转到授权前保存的url。如果失败，会提示用户关闭页面，重新授权，另外需要注意的是，如果微信名中有特殊字符，需要转码，否则会授权失败。整个过程可以实现授权，但是感觉代码写得不好，以后开发中希望有更好的方法，希望能和大家交流学习。2018-08-14更新，总结一下，二次开发过程简化了，但是整个思路还是一样的，我之前想到了另外一个方法，就是先把我那一串长参数保存到本地，然后授权我在本地获取参数分析的时候可以让后台帮我跳转到/product这样的固定页面。这个方法应该也是可行的。下次尝试后，我会更新关于我的信息以获得更多技术相关的文章。关注公众号“前端女校”。回复加群，即可加入“前端仙女群”如果对你有帮助，送个小星星给我吧(づ￣3￣)づ╭?～