React-Antd 登录 记住密码

记住密码的实现原理是通过将输入的账号密码存储在cookie中，下一次登录的时候直接获取cookie中的账号密码，将其填充到表单中。可以设置为定期存储，这样到了规定时间便从cookie中清除。

好了，知道大概思路了，下面我们来实现。

首先封装几个方法，分别是存储cookie、获取cookie和清除cookie：

//存储cookie
export const setCookie = (name, value, expiryDate) => {   //expiryDate是限期
    let currentDate = new Date()
    currentDate.setDate(currentDate.getDate() + expiryDate)
    document.cookie = name+"="+value+"; expiryDate=" + currentDate
}


//获取cookie
export const getCookie = (name, value, expiryDate) => {
    let arr = document.cookie.split("; ")
    for(let i=0; i<arr.length; i++){
        let arr1 = arr[i].split("=")
        if(arr1[0] == name){
            return arr1[1]
        }
    }
    return ''
}


// 清除cookie
export const removeCookie=(name)=>{
    getCookie(name,1,-1)
}

接下来是对方法的调用，因为我是类组件，需要创建实例并使用ref绑定表单，从而获取表单数据，具体戳：antd 通过ref在类组件中获取表单

    // 点击记住密码后将账号、密码存储至cookie
    this.rememberPassword = () => {
      if (this.state.isRemember) {     //isRemember是“记住密码”是否选中的状态
        setCookie(
          "username",
          this.formRef.current.getFieldValue("username"),  //获取表单的账号，这是在类组件中获取表单的写法，formRef是我创建的实例
          1
        );
        setCookie(
          "password",
          this.formRef.current.getFieldValue("password"),  //获取表单的密码
          1
        );
      } else {
        removeCookie("username");
        removeCookie("password");
      }
    };

 // 下一次登录将cookie填充表单
    this.remember = () => {
      if (getCookie("username") != "" && getCookie("password") != "") {
        if (this.formRef?.current?.setFieldsValue) {
          this.formRef.current.setFieldsValue({    //注意是setFieldsValue，不是setFieldValue!!!本人踩雷了T^T
            username: getCookie("username"),
            password: getCookie("password"),
          });
        }
      }
    };
  }

即可实现记住密码功能~~~~~~~