React 后台管理登陆页记住密码功能

288 阅读1分钟

后台管理登陆的时候总是有记住密码的功能,主要的实现方式是通过 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(过期时间)

image.png

最后在组件挂载的时候取 document.cookie 的值展示到登陆表单中去

useEffect(() => {
  if((getCookie('username') != '') && (getCookie('password') != '')) {
    form.setFieldsValue({
      Username: getCookie('username'),
      Password: getCookie('password'),
    })
  }
}, []);

一个简单的记住密码功能就完成了,如果使用 localstorage 需要自己再存一个过期时间,然后比对当前时间与过期时间,所以我选择的是 document.cookie 来处理