vue微信受权解决方案

背景

vue前后端星散开辟微信受权
2018-08-14更新
时隔四个月第一次更新，由于项目重构有一次打仗到了微信受权，思绪已比本来清楚的多了，将从新修正一下全部文章

场景

app将商品分享到微信朋友圈或许分享给微信挚友，用户点击页面时举行微信受权上岸，猎取用户信息。
题目：没有牢固的h5运用首页，回调不能到index。受权后重定向url带参数而且很长

本人痴顽，开辟历程当中，尝试过许多要领，踩坑不足以描述我的心境，可以说每一次都是一次跳井的体验啊。

1.一开始尝试的体式格局是前端要求微信衔接，返回code，然后code作为再去要求背景接口猎取token，背面看到他人的博客说这个要领不好，最好就是直接要求背景接口，然后背景返回url做跳转，所以就采用了最传统的要领，背景返回url，前台跳转。

2.这个时刻就涌现一个题目，微信受官僚跳跳跳，终究想回到第一次点进来时刻的链接就蛋疼了，从网上查了一下解决要领，将链接自身作为redirect_uri参数，也许就是这个模样

https://open.weixin.qq.com/connect/oauth2/authorizeappid=xxxxxxxxxxxxxxxxxx&redirect_uri=*www.admin?http://www.xxx.com/h5/product*&response_type=code&scope=snsapi_userinfo&state=STATE&connect_redirect=1#wechat_redirect


然则我们的前台链接是这个鬼模样的，自身带参数，而且超长，what？微信可以不会接收我长这么丑。/(ㄒoㄒ)/~~

http://www.xxx.com/h5/product?id=6RedfM5O4xeyl0AmOwmyipkHr8AQCv-hYXZVAIFTwDXOsWSKqgu3VaCmaKSerBnacvWuzO3Zwdf8y%2F2K2lvqkluV6Ane4LCAKyPU2tPAPj%2FMF6F6xkzp27GqqpNya7HbdEA34qGQJvHIA9tlIMkeEWid1112b8oZuP3FQBwU%2F%2FMaSrovzQP6LlzWamyPnv0vMizu8uh0ItpJOQUV1m%2FtemF3U9KuHo8rXCw%3D

终究摒弃了这个计划

3.斟酌怎样重定向我的前台地点，而且猎取token

接下来就是我现在用的要领，bug另有许多，先分享一下我的要领，后期优化或有更好的要领再做修正
在main.js中路由全局钩子推断当地是否是有user_token，也就是微信受权后返回的token，假如没有token，而且当前的路由不是author（特地为了受权而生的页面），那就保留当前的url，比方www.xxx.com/h5/product?id=6RedfM5O4xeyl0AmOwm，然后进入author。那假如当地有token，就是用户之前受权拿到过token而且vuex里没有用户信息，那我就猎取用户信息并保留在vuex中，这里碰到一个题目就是token会涌现逾期的状况，那我就删除了当地的user_token，window.localStorage.removeItem(&＃8220;user_token&＃8221;);革新页面 router.go(0);这个时刻就从新走了一遍假如没有token的状况。
初版要领

router.beforeEach((to, from, next) => {
// 第一次进入项目
let token = window.localStorage.getItem("user_token");
if (!token && to.path != "/author") {
window.localStorage.setItem("beforeLoginUrl", to.fullPath); // 保留用户进入的url
next("/author");
return false;
} else if (token && !store.getters.userInfo) {
//猎取用户信息接口
store
.dispatch("GetUserInfo", {
user_token: token
})
.catch(err => {
window.localStorage.removeItem("user_token");
router.go(0);
return false;
});
}
next();
});

2018-08-14第二版要领
差别的处所是将跳转推断从author.vue里拿出来放这里了逻辑实在很简单，有token猎取信息，没token跳转受权

router.beforeEach((to, from, next) => {
const token = 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') {
// 保留用户进入的url
if (to.path === '/shop' || to.path === '/product') {
window.localStorage.setItem('authUrl', to.fullPath) // 保留用户进入的url
}
store.dispatch('GetAuthUrl').then(res => {
// 此处返回的是背景拼接的微信受权地点，前台也是可以拼接的，跳转到微信受权
window.location.href = res.data.url //https://open.weixin.qq.com/connect/oauth2/authorize?appid=#aa&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=200

初版

GetQueryString要领

mixin.js

export const GetQueryString = name => {
var url = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
var newUrl = window.location.search.substr(1).match(url);
if (newUrl != null) {
return unescape(newUrl[2]);
} else {
return false;
}
};


第二版
只用来背景拿到参数返回到author页面后的照顾的参数假如猎取胜利则跳转到受权之前保留的url假如失利提醒用户封闭网页从新受权，别的有一点值得注意，微信名里有特别字符的须要转码要不受权会失利

全部历程是可以完成受权，然则以为代码写得不好，今后的开辟中愿望可以有更优的要领。愿望能和人人交换学习。
2018-08-14更新，总结一下，第二次开辟流程做了简化，然则全部思绪照样一样，我之前想到过别的一种要领，是将我的那串长参数先保留在当地，然后去受权的时刻就可以让背景帮我跳转到牢固页面如/product我在从当地拿参数剖析，这个要领应当也是可行的，下次尝试后更新

您可以扫描增加下方的微信并备注 Soul 加交换群，给我提意见，交换学习。

假如对你有协助送我一颗小星星（づ￣3￣）づ╭&＃x2764;～