在微信小程序的開發中，經常遇到需要使用 <web-view></web-view> 內嵌 H5 的需求。在這種需求中比較棘手的問題應該就是登錄狀態的判斷了，小程序中的登錄狀態怎樣與H5中的登錄狀態保持一致？

一般來說，后端開發同事多數會要求我們在 H5 中的接口請求中攜帶 cookie，來獲取用戶當前的登錄狀態。這個該如何實現呢？

分為以下幾步：

1、小程序中，封裝統一的接口請求方法（以便在每個接口中都攜帶 cookie，放在 header 中）；

const request = parameter => {//url必填項if (!parameter || parameter == {} || !parameter.url) {console.log('Data request can not be executed without URL.');return false;} else {var murl = parameter.url;var headerCookie = wx.getStorageSync('cookie');//判斷是否有獨自cookie請求var selfCookie = parameter.selfCookie;selfCookie && (headerCookie += selfCookie);wx.request({url: murl,data: parameter.data || {},header: {// 'Content-Type': 'application/x-www-form-urlencoded','Cookie': headerCookie},method: parameter.method || 'POST',success: function(res) {parameter.success && parameter.success(res);},fail: function(e) {parameter.fail && parameter.fail(e);// console.log(e.errMsg); wx.showToast({title: '網絡信號較差',icon: 'loading',duration: 3000});},complete: function() {parameter.complete && parameter.complete();}});}}

?

2、小程序中，當用戶成功登錄之后，保存當前cookie；

utils.request({url: url,data: {},success: (res) => {wx.setStorageSync('cookie', res.header["Set-Cookie"]);}
});

3、在<web-view></web-view> 內嵌 H5 的頁面，獲取已保存的 cookie 值，使用 url 拼接的方式傳給 H5 頁面；

// <web-view> 頁面模板
<view><web-view src="{{url}}" ></web-view> </view>

//cookie 處理

　　let value = wx.getStorageSync('cookie')，cookie_vl;

　　if (value) {
　　　　cookie_vl= value.match(new RegExp("(^| )"+"jxi-m-sid"+"=([^;]*)(;|$)"))[2] ;
　　}

　　// 處理 url，拼接 cookie 值

　　this.setData({
　　　　url: `${this.data.url}?${cookie_vl}`
　　});

4、在H5中的處理方法是： 獲取 cookie 值并寫入。

let cookie = window.location.href.split('?')[1];document.cookie = `jxi-m-sid=${cookie};domain=${host};path=/`;

上述代碼中的 host 值得是 H5 鏈接中的域名。

這樣處理之后，接口發送請求時會攜帶該 cookie，后端同事獲取之后就可以判斷登錄狀態了。

轉載于:https://www.cnblogs.com/sunLemon/p/9585532.html

總結

以上是生活随笔為你收集整理的微信小程序中使用 web-view 内嵌 H5 时，登录问题的处理方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。