解决微信H5静默授权获取code以及H5页面历史回退死循环问题

更新日期: 2020-02-28阅读量: 1118标签: 微信

摘要

近期在开发H5页面相关需求,需求中有个微信静默授权登录的功能,之前没有接触过这个功能,经过调研官方文档,开发出了初级方案;初级方案可以解决获取code,但是页面返回上一个页面时,需要连续返回两次才可以回到上一个页面。经过获取流程分析,解决了返回循环的bug。

 

初级方案原理

当时调研完官方文档后,发现授权流程是重定向的方式,就傻白甜的直接在需要微信code的页面直接获取code并跳转回当前页,这样就造成了页面获取死循环的bug。为了解决获取code死循环的bug,在获取code时,建立一个中间也获取微信的code,code获取后将code存储到sessionStorage里,最后再重定向回页面,具体流程如下图所示:



 ·初级方案路由history

从路由history可以看出,初级方案建立一个微信获取code的页面,于是在路由的history多了一层授权的路由,所以返回作品列表需要连续返回两次才会回到列表页。路由history堆栈表如下图所示:


 

终极方案原理

根据初级方案的授权模式进行改动,进入作品详情页判断UrlCode和localCode是否都有值,值为空或者null,获取微信code。当urlCode有值时,执行history.goback(),这样既可以防止页面循环获取code刷新操作,又可以去除history中获取微信code的历史路由。具体流程示意图如下所示:


 

 ·终极方案路由history

终极方案是直接在当前的作品页获取code并跳转回作品页,免去了一层调用获取code页组件的路由。这样做会引起页面循环获取code,所以需要判断urlcode和localcode来决定是否继续循环获取,还是做history.goback()。具体的路由history堆栈表如下图所示:



react实现方案

理清了终极的微信静默授权登录实现方案,我们就可以根据思路来编写我们需要的功能代码了,个人在开发中是使用的react-Hook,所以就微信授权这个功能,自定义了一个useWxCode的可用hook。具体代码如下:

import { useEffect } from 'react';
import { useHistory } from 'react-router-dom';

// 获取用于微信授权的 code,卸载后会自动清除
export const useWxCode = () => {
  const history = useHistory();
  useEffect(()=>{const searchParams = new URLSearchParams(window.location.search);
    const urlCode = searchParams.get('code');
    const localCode = sessionStorage.getItem('code');
    if (!urlCode && !localCode) {
      const appid = 'xxxxxxxx'; // 微信授权的公众号的appid
      const redirectUrl = encodeURIComponent(window.location.href);
      window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${redirectUrl}&response_type=code&scope=snsapi_base&state=123#wechat_redirect`;
    } else if (urlCode) {
      sessionStorage.setItem('code', urlCode);
      history.goBack();
    }
    return ()=>sessionStorage.removeItem('code');
  },[]);
  
  return sessionStorage.getItem('code');
}

组件中获取授权的code:

import React from 'react';
// 引入useWxCode.js
import { useWxCode } from '@/utils/useWxCode';

const Test = () => {
  const code = useWxCode();

  return (
    <div>
      测试  
    </div>
  )    
}    

export default Test;

 来自:https://www.cnblogs.com/BlueBerryCode/p/12581263.html

站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: https://www.fly63.com/article/detial/8779

移动端检测微信浏览器返回,关闭,进入后台操作

最近做一个倒计时记录学习时长项目,需要在用户点击浏览器的返回按钮或者直接关闭浏览器,或者直接退出微信或者进入后台时记录下当前页面的进度,下次进去从上次退出的地方开始倒计时。一开始想的很简单直接监测浏览器的返回事件window.onbeforeunload

js判断是否是微信浏览器方法总结【整理4种方式】

在实际开发中,我们需要知道当前的浏览器是微信内置的浏览器,那么如何判断呢?以下提示了四种方法,每一种都可以进行判断是否是微信浏览器。

QQ/微信里域名经常被举报二屏蔽?微信/QQ屏蔽域名举报按钮的实现方式

近很多老哥问我,为啥自己的域名在QQ/微信里面很容易被封?1、页面里面的内容违规或者诱导被举报而导致的拦截;2、用户和同行举报;3、腾讯等定期会检查;

解决微信返回上一页.页面不刷新问题

在项目中遇到的一个神奇的 BUG,点击「返回」按钮返回到上一页,但是页面却没有刷新。这是 ios 微信的缓存机制造成的,跳转到下一页时仍然会缓存当前页。

nodeJS微信JSDK 配置

微信公众平台申请一个测试公众号;配置nodeJS 使用express框架搭建服务器;使用内网穿透工具(例如:natapp)把本地服务器映射到公网上去;前端使用微信JSDK

H5解决浏览器,微信背景的上下滑动问题,脱离窗口的js局部滚动解决方法

当我们使用手机浏览器或微信浏览器打开Html网页的时候,如果上下滑动页面,页面就会出现黑色的空白(如图所示)。那么如何解决滑动的时候如何避免出界,出现头部和底部的黑底?

微信活码技术如何解决微信个人号被动加好友上限加好友异常(微信群100人限制)

微信群营销已经成为主流的营销方式,我们都知道微信群未满100人之前可以分享群二维码,让我们的粉丝通过扫码进群,但是人数超过100后,发出的二维码就失效了,无法再次扫码进群,因此,很多人会有微信群满100人怎么再加人

套路!陌生美女加微信好友,提出激情裸聊,然后……

一个月黑风高的晚上,你独自刷着朋友圈,突然一个陌生女子要求。添加好友,你第一反应是什么?更要命的是没聊几句话,对方居然要求“裸聊”!

Vue微信公众号兼容微信JS-SDK,使用分享等功能

最近项目是基于微信公众号的Vue项目,有一个非常重要的分享功能,不搞不知道一搞不得了,发现vue-router和微信SDK配置有很大的兼容性问题,我们一起一个一个方法、一个一个api尝试才找到解决办法

微信h5页面下拉露出网页来源的解决办法

微信h5页面下拉露出网页来源的解决办法:将document的touchmove事件禁止掉,备注:要加上 passive: false,不然会出现以下报错

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!