uniapp的webview 嵌入商城登录异常cookie丢失
uniapp的webview 嵌入商城登录异常cookie丢失
背景
公司一个uniapp开发的聊天系统, 其中用webview嵌入了一个商城,这个商城代码比较老是前后端不分离的,使用的是cookie进行的用户数据流转。实际过程中不管用户是否登录,只要进入到需要验证用户信息的页面就不停的跳登录框,不管用户是否已经登录过了。这个商城在H5浏览器上面运行是正常的。
原因
我觉得是uniapp 实现webview和原生还是有点区别的 原生是直接用了一个浏览器 uniapp 是用了浏览器然后里面嵌套了一个iframe 从而导致了问题的发生
解决方案
最最重要的一点 如果是打包app的,打成app cookie的问题就不存在,所以用不到本方案
本方案仅仅适用于前后端不分离,而且接口都没有封装的那些老程序,如果您的商城是前后端分离,对接口进行了封装,请直接在封装的接口用一个命令把cookie 加进去就行,下面的方法比这个复杂多了 请不要使用。
思路
1、拦截所有的a标签跳转(因为是不分离的 a标签有时候就返回的是网页,还需要用户信息),把跳转地址上面加上用户信息
给所有的form请求的地址加上需要的用户信息
2、给所有的请求携带用户信息
拦截a标签,给form地址加上需要的用户信息
//这里要获取一下,防止那手特别快的 页面还没渲染完就点跑了 第一次的localStorage.setItem("storeUserId", theRequest.user_id);是在登录页完成的,请自行补充,尽量让修改后的程序结实一点
var link_user_id = localStorage.getItem("storeUserId");
if (!link_user_id) {
let url = window.location.search
var theRequest = new Object();
if (url.indexOf("?") != -1) {
var str = url.substr(1);
strs = str.split("&");
for (var i = 0; i < strs.length; i++) {
theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
}
}
link_user_id = theRequest.user_id
localStorage.setItem("storeUserId", theRequest.user_id);
}
setUserId4store()//页面进入就为a标签加一次user_id
$(document).ajaxStop(function() {//所有通信完成再为a标签加载一次user_id
setUserId4store()
});
document.onreadystatechange = function(){//页面加载完成再为a标签加载一次user_id
if(document.readyState == 'complete'){
setUserId4store()
}
}
function setUserId4store() {
var link = document.getElementsByTagName("a")
var formlist=document.getElementsByTagName("form")
// console.log("setUserId4store",formlist,link_user_id)
if (link_user_id) {
for (let i = 0; i < link.length; i++) {
let aElement = link[i]
aElement.addEventListener("click", function(e) {
stopADefault(e, this)
})
}
for (let i = 0; i < formlist.length; i++) {
let aElement = formlist[i]
console.log(aElement.action)
if (aElement.action.indexOf("?") != -1){
aElement.action= aElement.action + "&user_id="+link_user_id
}else {
aElement.action = aElement.action+ "?user_id="+link_user_id
}
}
}
}
function stopADefault(e, aElement) {
e.preventDefault();
if(aElement.attributes["href"]){
console.log('aElement.attributes["href"].nodeValue',aElement.attributes["href"].nodeValue)
if (aElement.attributes["href"].nodeValue.indexOf("?") != -1){
window.location.href = aElement.attributes["href"].nodeValue + "&user_id="+link_user_id
}else if(aElement.attributes["href"].nodeValue.indexOf("mobile") != -1){
window.location.href = aElement.attributes["href"].nodeValue + "?user_id="+link_user_id
}else if(aElement.attributes["href"].nodeValue.indexOf("history.go(-1)") != -1){
history.go(-1)
}
}
}
修改jquery 源码
失败的尝试
//document.cookie = “user_id=”+link_user_id+";path=/";这个不可行请不要使用 请使用下面的修改jquery 源码的方法 这样一劳永逸 当然如果贵公司没使用jquery 我就也帮不到你了
如果贵公司所有通信是封装的,请改封装代码 不要改jquery 源码 走下面这步是不得已而为之的!!!!
在jquery 源码里面搜索setRequestHeader
然后找到如下一段代码 for (s in u.headers) w.setRequestHeader(s, u.headers[s]);
在这段代码之后添加你要携带的信息 比我们公司 需要的key值名字是 user_id 值是link_user_id
var link_user_id = localStorage.getItem("storeUserId"); // 获取link_user_id
if (!link_user_id) { // 获取如果不存在 就从地址上面读取,这个最好是引入webview的时候拼在地址后面 这样第一次就能从这里读了
let url = window.location.search
var theRequest = new Object();
if (url.indexOf("?") != -1) {
var str = url.substr(1);
strs = str.split("&");
for (var i = 0; i < strs.length; i++) {
theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
}
}
link_user_id = theRequest.user_id
localStorage.setItem("storeUserId", theRequest.user_id);
}
//下面这句是关键 如果您的代码在别的地方可以获取到你的信息 上面这部分不要也罢
w.setRequestHeader("user_id",link_user_id);
这样改完以后 每次请求的时候请求头都会带着你要的信息了 好像下面这样
Accept: application/json, text/javascript, /; q=0.01
Accept-Encoding: gzip, deflate
Accept-Language: zh-CN,zh;q=0.9
Connection: keep-alive
Host:
Referer:
User-Agent: Mozilla/5.0 (Linux; Android 5.0; SM-G900P Build/LRX21T) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.182 Mobile Safari/537.36
user_id: 132 这里就是你带的
X-Requested-With: XMLHttpRequest
更多推荐
所有评论(0)