“Offer 驾到，掘友接招！我正在参与2022春招打卡活动，点击查看活动详情。”
在用antUI做项目的时候，发现很多的注册表单或者登录表单都是有记住密码的功能的
还没有做过类似的功能，心中有了几种方案的实现，但是我们不能只停留在空想状态，实践出真知。
分析
记住密码这样的功能应该是在前端进行完成比较好，我们只要把用户的信息保留在前端的存储中即可，那么常见的有cookie，localstorage,sessionstorage,再根据实际情况，那么这三者又有什么区别呢？我们怎么进行选择？可以看看我的这篇文章cookie?session?localStorage?sessionStorage?来个一把梭;
我们选择localstorage
1.首先要登录成功后才记住密码否则错误的密码是没有意义的
const onFinish = (values: any) => {
//点击提交按钮
const { username, password, remember } = values;
if (remember) {
localStorage.setItem("userName", username);
localStorage.setItem("password", password);
}
login(username, password)
.then((res) => {
const { data, msg } = res.data.data;
if (res.data.code === 0) {
message.success(msg);
localStorage.setItem("userMes", JSON.stringify(data));
navigate("/index");
} else {
message.error(msg);
}
})
.catch((err) => {
message.error("登录失败");
});
};
这两句代码将我们的账号信息保存起来，其实这还是不严谨的，我们为了安全应该对其进行加密后再保存，但是这里只是为了简单的演示所以就大行不顾细谨了。
localStorage.setItem("userName", username);
localStorage.setItem("password", password);
2.之后我们只要在页面挂载的时候进行缓存检查，查看是否有账号密码保护即可
useEffect(() => {
//页面一加载的时候获取缓存中是否有账号记录，有的话进行显示，实现账号密码记住的功能
if(passwordInput!==null&&userNameInput!==null){
(passwordInput as any).current.input.value =localStorage.getItem("userName");
(userNameInput as any).current.input.value =localStorage.getItem("password");
}
}, []);
