后台管理登陆的时候总是有记住密码的功能,主要的实现方式是通过 document.cookie 或者 localstorage, 本文用的是 document.cookie 来实现的。使用可查看 MDN 文档, developer.mozilla.org/zh-CN/docs/…
在工具库中先写好工具函数
/**
* 存储cookie
* @param { string } name 名字
* @param { any } value 值
* @param { number } expiryDate 限期
*/
export const setCookie = (name: string, value: any, expiryDate: number) => {
let currentDate = new Date();
currentDate.setDate(currentDate.getDate() + expiryDate);
document.cookie = name + '=' + value + '; expires=' + currentDate;
};
/**
* 获取cookie
* @param { string } name 名字
* @return { string } 值
*/
export const getCookie = (name: string) => {
let arr = document.cookie?.split('; ');
let value = ''
arr.forEach(item => {
let _arr = item.split('=');
if (_arr[0] == name) {
value = _arr[1];
}
})
return value;
};
/**
* 清除cookie
* @param { string } name 名字
*/
export const removeCookie = (name: string) => {
setCookie(name, '', -1);
};
组件中的逻辑,如果勾选了"记住密码选项"的,则设置document.cookie, 否则清除
if(Remeber) {
setCookie('username', 'root', 1) // 1 是指一天
setCookie('password', '123456', 1)
} else {
removeCookie('username')
removeCookie('password')
}
然后在浏览器会看到存储的 Name、Value、Expires(过期时间)
最后在组件挂载的时候取 document.cookie 的值展示到登陆表单中去
useEffect(() => {
if((getCookie('username') != '') && (getCookie('password') != '')) {
form.setFieldsValue({
Username: getCookie('username'),
Password: getCookie('password'),
})
}
}, []);
一个简单的记住密码功能就完成了,如果使用 localstorage 需要自己再存一个过期时间,然后比对当前时间与过期时间,所以我选择的是 document.cookie 来处理