公司有个项目,需求是这样的:
pc 端的项目,有一个步骤可以在手机上操作,页面都在同一个域名下面,但是pc端需要登录(用到了 cookie ),公众号端不需要登录(不用 cookie ) ,不清楚服务端怎么处理的,只知道这时候如果还携带 cookie 服务端会提示一个什么东西(不是重点),前台需要在进去操作的时候先将 cookie 清除掉。
至于这个 cookie 怎么来的,那就有的说道了,将 pc 的地址直接用微信访问,然后登录上去(记录了 cookie ),然后关闭(不是退出,是直接关闭, cookie 没清除),这时候再用公众号访问那其中的一个专门给公众号准备的页面,和 pc 的地址在同一个域名下边,进行操作的时候 cookie 就存在了
解决方案就是公众号端在进行操作的时候,先删除 cookie (设置过期时间 -1),再进行操作,正常来讲,后端应该是收不到 cookie 了,因为 cookie 都过期了,不存在了,但是后端还是能收到 cookie 这就显得稍微的诡异了一点
cookie 是封装好的,先上一份通过测试之后的正确代码,有兴趣的可以往下看看有问题的代码
const setCookie = (name, value, expire = 60*60*24, domain=null) => {
domain || (domain = window.location.host);
let date = new Date();
date.setSeconds(date.getSeconds() + expire);
document.cookie = name + " = " + escape(value) + "; expires=" + date.toGMTString()+"; dommain=" + domain + "; path=/";
};
//读取cookie
const getCookie = (name) => {
var arr;
const reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
arr = document.cookie.match(reg);
if (arr) {
return unescape(arr[2]);
} else {
return null;
}
};
//读取cookie
const readCookie = (name) => {
let arr = null
let reg = new RegExp('(^| )'+name+'=([^;]*)(;|$)')
if (document.cookie && (arr = document.cookie.match(reg))) {
return unescape(arr[2])
} else {
return null;
}
}
const delCookie = (name, domain=null) => {
domain || (domain = window.location.host);
let exp = new Date();
exp.setTime(exp.getTime() - 1);
let cval = getCookie(name);
if (cval != null) {
document.cookie = name + " = " + cval + "; expires=" + exp.toGMTString()+"; dommain=" + domain + "; path=/";
}
};
//清除所有cookie
const clearAllCookie = (domain=null)=>{
domain || (domain = window.location.host);
let date = new Date();
date.setTime(date.getTime() - 1);
let keys = document.cookie.match(/[^ =;]+(?=\=)/g);
if(keys){
for(let i=keys.length;i--;){
document.cookie = keys[i] + ` = 0; expires=${date.toGMTString()}; dommain=${domain}; path=/`;
}
}
}
export default {
setCookie,
getCookie,
readCookie,
delCookie,
clearAllCookie
};
下边是造成 cookie 诡异的代码:
可以看到,也就是 domain 和 path 没携带上,可能是 微信浏览器 这边要求比较的严格吧,但是这一份代码放 pc 端是没问题的
const setCookie = (name, value, expire) => {
let date = new Date();
date.setSeconds(date.getSeconds() + expire);
document.cookie = name + " = " + escape(value) + "; expires=" + date.toGMTString();
};
const getCookie = (name) => {
var arr;
const reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
arr = document.cookie.match(reg);
if (arr) {
return unescape(arr[2]);
} else {
return null;
}
};
//读取cookies
const readCookie = (name) => {
let arr = null
let reg = new RegExp('(^| )'+name+'=([^;]*)(;|$)')
if (document.cookie && (arr = document.cookie.match(reg))) {
return unescape(arr[2])
} else {
return null;
}
}
const delCookie = (name) => {
let exp = new Date();
exp.setTime(exp.getTime() - 1);
let cval = getCookie(name);
if (cval != null) {
document.cookie = name + " = " + cval + "; expires=" + exp.toGMTString();
}
};
//清除所有cookie
const clearAllCookie = ()=>{
let date = new Date();
date.setTime(date.getTime() - 10000);
document.write(document.cookie);
let keys = document.cookie.match(/[^ =;]+(?=\=)/g);
if(keys){
for(let i=keys.length;i--;){
document.cookie = keys[i] + `=0; expires=${date.toGMTString()};PATH=/`;
}
}
}
export default {
setCookie,
getCookie,
readCookie,
delCookie,
clearAllCookie
};