摘要
近期在開發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.uj5u.com/qiye/102396.html
標籤：JavaScript
上一篇：小程式筆記下