React-Antd Pro-登录 记住密码

使用Cookie

封装工具方法

export const setCookie=(name,value,expiryDate)=>{//参数：cookie的key、cookie的value、存储时间
    let currentDate=new Date()
    currentDate.setDate(currentDate.getDate()+expiryDate)
    document.cookie=name+'='+value+'; expires='+currentDate  //注意；和expires之间有一个空格
}
export const getCookie=(name,value,expiryDate)=>{
    let arr=document.cookie.split('; ')//注意分号后面有一个空格
    for(let i=0;i<arr.length;i++){
        let arr2=arr[i].split('=')
        if(arr2[0]==name){
            return arr2[1]
        }
    }
    return ''
}
export const removeCookie=(name)=>{
    setCookie(name,1,-1)
}

组件中获取存储的Cookie

const [form]=Form.useForm()    //antd的Form组件的方法
useEffect(()=>{
    if(getCookie('username')!=''&&getCookie('password')!=''){
                form.setFieldsValue({username:getCookie('username'),password:getCookie('password')})
    }
},[])

......

return (
    <>
    <Form ...  form={form}>
        ......
    </Form> 
    ......
    </>
)

登录成功后设置Cookie

if(保存密码){
    setCookie('username',payload.username,1)
    setCookie('password',payload.password,1)
}else{
    removeCookie('username')
    removeCookie('password')
}