使用Cookie去传递用户信息
写给使用cookie
,也会迷茫的你。
说一下Cookie
Cookie
是储存在用户本地的数据,一般用于存储用户信息,浏览器在去请求接口时,会自动携带上Cookie
(也就算是本地用户信息发送到服务器进行验证)。
Cookie
常用属性:设置失效时间,expires属性,时间到期本地会自动清除过期Cookie
。
Cookie
属性:
简单介绍一下Cookie
属性:
属性名 | 简单介绍 |
---|---|
name | Cookie的名称 |
value | Cookie的值 |
Domain | Cookie在哪个域是有效的 |
Path | Cookie的有效路径 |
Expires/Max-age | Cookie的有效期 |
Size | Cookie的大小 |
HttpOnly | 是否允许通过脚本document.cookie去更改这个值,默认false容许修改 |
Secure | Cookie的安全属性,为true时只在安全协议中传输此Cookie。 |
SameSite | 限制第三方 Cookie,分为Strict>Lax>None,None配合Secure使用 |
Priority | 优先级,当cookie数量超出时,低优先级的cookie会被优先清除 |
Cookie的使用
注意浏览器的document
对象,浏览器控制台打印console.dir(document)
所以可使用document.cookie
赋值
安全存储cookie
使用
// 5秒就过期了,过期了自动删除
setCookie("userToken", "AAAAAA", 5 / (24 * 60 * 60) );
函数
function setCookie (cookieNname, cookieValue, expiresDays = 1) {
// cookies 过期的时间 默认为1天
var date = new Date();
date.setTime(date.getTime() + expiresDays * 24 * 60 * 60 * 1000);
let expires = "expires=" + date.toUTCString();
document.cookie = cookieNname + "=" + cookieValue + ";" + expires + ";path=/";
}
设计5秒消失,测试自动删除
安全获取cookie中的值
也就是获取cookie中存储的用户信息
function getCookieValue (cookieName) {
var name = cookieName + "=";
var decodedCookie = decodeURIComponent(document.cookie);
var ca = decodedCookie.split(";"); // ['userToken=AAAAAA']
for (var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == " ") {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
// 剥离出token数据
return c.substring(name.length, c.length);
}
}
return "";
}
遇到问题
问题一:document.cookie
赋不上值
本地直接通过浏览器浏览的时候,并不能写入cookie。经发现,只有当用在服务器或者本地的服务器中的时候,才能使用这个方法写入cookie
html测试时解决办法:通过VScode的插件live Server 来打开动态服务器
在使用脚手架的时候,可以优先考虑,本地服务器打开,而不是localhost打开。
与服务器传递
在对服务器传递数据内容,请求头等都需要事先与后端商量一下
比如将token放到请求头:Authorization中
let instance = axios.create({
baseURL: "https://xxxx/",
timeout: 1000
})
instance.interceptors.request.use(
config => {
config.headers["Authorization"] = getCookieValue("userToken");
return config;
}
)
转载自:https://juejin.cn/post/7213184860676718629