admin管理员组文章数量:1532367
在前后端分离的开发模式中，在首次进入页面通过微信授权后会遇到返回两次才能真正达到返回的效果。但在纯应用内前后端(jsp等)重定向，是没有上述多次返回按键问题的。
单页应用的解决方案
-
在首次进入项目页面时，可以让后端判断前端过来的请求，如果cookies失效需要重新跳转授权了，那么返回一个标志告知前端需要微信跳转至授权页面。或者前端自己写判断哪个页面需要授权后才能进入。
-
前端通过location.href跳转至该授权回调链接。授权完毕会redirect到步骤2的约定url中。目前为止location.href和微信redirect一共使浏览历史＋1
window.location.replace(`https://open.weixin.qq/connect/oauth2/authorize?appid=${appid}&redirect_uri=${window.location.href}&response_type=code&scope=${scope}&state=wxoauth#wechat_redirect`)授权后会返回redirect_uri=${window.location.href}约定的链接中并在链接中携带code等信息
-
前端将该code存至localstorage，然后调用history.back()
if (window.location.href.indexOf('code') !== -1 && window.location.href.indexOf('state') !== -1) {
window.localStorage.setItem('wx_code', getQueryVariable('code'))
window.localStorage.setItem('wx_state', getQueryVariable('state'))
history.back()
}
- 这时就又回到了授权跳转前的那个页面，目前为止history条数不增不减！然后该页面再发起的请求就可以带上localstorage的code参数了，后端可以根据该code参数获取用户信息，再写入cookies，之后的请求就一切顺利了
if (window.localStorage.getItem('wx_code') && window.localStorage.getItem('wx_state')) {
const params = {
code: window.localStorage.getItem('wx_code')
}
// 请求后端接口返回openid的逻辑
...
}
但ios的微信浏览器history.back()后并不会刷新页面，可以在上个页面加段js
$(function () {
var isPageHide = false;
window.addEventListener('pageshow', function () {
if (isPageHide) {
window.location.reload();
}
});
window.addEventListener('pagehide', function () {
isPageHide = true;
});
})
或者在路由守卫中加入
window.onpageshow = function (e) {
if (e.persisted) {
window.location.reload()
}
}
这样在首次进入页面后返回一次即可退出页面。
版权声明：本文标题：微信授权登录增加浏览器历史记录解决方法 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://m.elefans.com/xitong/1726837138a1086405.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论