微信授权登录增加浏览器历史记录解决方法

在前后端分离的开发模式中，在首次进入页面通过微信授权后会遇到返回两次才能真正达到返回的效果。但在纯应用内前后端(jsp等)重定向，是没有上述多次返回按键问题的。

单页应用的解决方案

在首次进入项目页面时，可以让后端判断前端过来的请求，如果cookies失效需要重新跳转授权了，那么返回一个标志告知前端需要微信跳转至授权页面。或者前端自己写判断哪个页面需要授权后才能进入。
前端通过location.href跳转至该授权回调链接。授权完毕会redirect到步骤2的约定url中。目前为止location.href和微信redirect一共使浏览历史＋1
```
window.location.replace(`https://open.weixin.qq.com/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()}}

这样在首次进入页面后返回一次即可退出页面。

微信授权登录增加浏览器历史记录解决方法相关推荐

微信公众号网页授权登录多域名的解决方法
最近在项目中,由于我们只有一个公众号,但有多个业务系统,就想可以都让同一个公众号授权登录,方便用户的管理.但问题来了,我们都知道微信公众号授权域名只能填写两个,如果我们有多个呢,该如何解决呢. 在网上 ...
浏览器打开微信公众号h5页面，增加cookie绕过微信授权登录
from selenium import webdriver from time import sleepdriver = webdriver.Chrome() #插入cookie需要与cookie相 ...
抖音微信登录服务器繁忙,微信登录抖音失败解决方法介绍
微信登陆抖音可以想必一些小伙伴出现了问题,这到底是怎么回事呢?下面18183小编就为各位玩家带来了微信登录抖音失败解决方法介绍. 微信登录抖音失败解决方法介绍 1.登录的时候没有同意授权; 2.版本没 ...
微信授权登录流程以及公众号配置方法（golang后端）
一.准备一个已经认证OK的微信公众号和已经备案的域名,且解析好配置好https证书. 1.如上图微信公众号 > 基本配置 ,设置开发者密码 2.设置IP白名单,白名单填写提供后端服务的服务器公 ...
android qq三方登录授权失败,QQ第三方登录无法授权错误码110401的解决方法
原标题:QQ第三方登录无法授权错误码110401的解决方法一些网友在注册APP的时候,会选择QQ作为第三方登录方式,但是,最近,一些网友发现:选择QQ第三方登录的时候,会出现无法授权错误码11040 ...
android qq三方登录授权失败,教大家qq第三方登陆授权失败110401怎么办的解决方法...
今天小编来给大家针对这个教大家qq第三方登陆授权失败110401怎么办的解决方法的问题来进行一个介绍,毕竟当下也是有诸多的小伙伴对于教大家qq第三方登陆授权失败110401怎么办的解决方法这个问题非常 ...
微信授权登录mock（在没有真实微信账号的情况下测试大量微信账户授权登录的情况）...
场景介绍对于构建在微信公众号的系统,帐号体系往往使用微信授权登录(如各类微信商城应用系统). 这样操作不仅可以实现静默注册,对用户几乎是无感的,同时也达到了区分用户,获取用户基本信息(头像,昵称等) ...
硅谷课堂 12_公众号消息和微信授权登录
硅谷课堂第十二天-公众号消息和微信授权登录文章目录硅谷课堂第十二天-公众号消息和微信授权登录一.公众号普通消息 1.实现目标 2.消息接入 2.1.公众号服务器配置 2.2.验证来自微信服务器消 ...
微信授权登录(java实现)
微信公众平台开发文档微信授权登录获取用户信息有2种方式: 1.静默授权获取用户信息. 2.非静默授权弹出授权界面,用户确认之后获取用户信息(这种方法能够获取到更多信息). 开发前准备: 1.获取到A ...
html5+ mui框架微信授权登录后跳回app无任何回调事件
2019独角兽企业重金招聘Python工程师标准>>> 微信授权登录可以调起微信,但是在微信上点击确认登陆后跳回app,但是之后无任何回掉事件. 问题原因: 1 因为我在集成Face ...

微信授权登录增加浏览器历史记录解决方法

单页应用的解决方案

微信授权登录增加浏览器历史记录解决方法相关推荐

最新文章

热门文章