場景
在微信中打開需要授權的web應用時,通常得通過跳轉微信授權地址:
https://open.weixin.qq.com/connect/oauth2/authorize?
appid=xxxx
&redirect_uri=www.myapp.com
&response_type=code
&scope=snsapi_base
&state=xxxx
#wechat_redirect
在成功授權后夾帶著authCode及 state
值自動返回到 redirect_uri
參數所指定的地址,再拿 authCode 在開發者后端的登錄接口中完成登錄,最后手動跳轉到目標頁面(這個特定頁可以在授權前先記錄下來,最后再拿出來做跳轉),一切都非常自然。
問題
然而會有這樣的需求:用戶通過手機實體按鍵或全屏滑動操作返回,最終必定會到達處理授權登錄的頁面,從而再次觸發登錄,并再次跳轉回來,無法退出應用。
方案
在后端登錄接口調取成功后、跳轉到目標頁面前,通過 window.history.replaceState()
方法手動添加一個 history,比如:
window.history.replaceState(null, null, window.location.protocol + '//' + window.location.host + '/#/wechat_exit');
replaceState()
并不會直接跳轉到 /wechat_exit
,但是在下次用戶做出返回操作時會經過!這是與使用 pushState()
存在的本質區別,因為 replaceState()
清除了之前的 history,這也就使得用戶無法通過物理操作手動返回到跳轉前的頁面(授權登錄頁)。
接下來全局觀察并捕獲這個 history,當到達 /wechat_exit
時主動調取 微信接口 closeWindow()
來關閉應用窗體。以vue為例添加路由攔截來全局觀察:
router.beforeEach((to, from, next) => {
if (to.path === '/wechat_exit') {
common.getWechatSDK(wx => {
wx.closeWindow();
});
}
}
common.getWechatSDK()
是已封裝微信 js sdk 接口的方法,在獲取成功后調取 closeWindow()
接口,更多js接口請參照:https://work.weixin.qq.com/api/doc#90001/90144/90540
https://www.weixinsxy.com/jssdk/