react-cookies使用实现记住密码

1.下载 

npm install  react-cookies --save -g

2.引入

import cookie from "react-cookies";

3.操作 

let inFifteenMinutes = new Date(new Date().getTime() + 24 * 3600 * 1000);//设置失效时间 cookie.save("remember", values, { path: "/", expires: inFifteenMinutes }); //存入cookie

// {path:'/'}意思是所有页面都能用这个cookie

cookie.load("remember");  //导入

cookie.remove("remember"); //移除

4.记住密码

用户点击单选框勾选记住密码后，变量 remember = true，提交表单时存入cookie。当页面重新加载后，利用load导出cookie，将其携带的value赋值给input的初始值。（这里用的antd组件，表单初始值为initialValues=obj）当 remember = false，使用remove移除。

5.复盘

1.设置失效时间，否则会话结束cookie自动移除。

2.注意变量的类型，否则容易报错如：Assignment to constant variable.

3.利用if和全局变量进行动态执行。若此时web本地拥有cookie，我们想导入load很可能无法成功导入。react无法识别load（也有可能是cookie没存入），后续对全局变量赋空值（以免无cookie时报错），判断load的值是否存在，若存在则赋值给全局变量，改变表单初始值。

4.避免使用state，可能出现无限循环。若load存在，调用setData修改state，此时可能引发无限递归，条件一直成立，每次执行重新渲染组件，如此往复。

6.完整代码

import { Link, useNavigate } from "react-router-dom";
import cookie from "react-cookies";
import { LockOutlined, UserOutlined } from "@ant-design/icons";
import { Button, Checkbox, Form, Input, message } from "antd";
import styles from "./index.module.css";

function Account() {
  const navigate = useNavigate();
  let cache = "";
  if (cookie.load("remember")) {
    cache = cookie.load("remember");
    console.log("in", cache);
  }
  const onFinish = (values) => {
    if (values.remember) {
      // 保存cookie
      // {path:'/'}意思是所有页面都能用这个cookie
      let inFifteenMinutes = new Date(new Date().getTime() + 24 * 3600 * 1000);
      cookie.save("remember", values, { path: "/", expires: inFifteenMinutes });
      cache = cookie.load("remember");
      console.log("load", cache);
    } else {
      cookie.remove("remember");
    }
    console.log("Received values of form: ", values);
    // ajax登录
    message.info("登录成功");
    //navigate("/system");
  };
  return (
    <div>
      <Form
        name="normal_login"
        className={styles.loginForm}
        initialValues={{
          remember: true,
          account: cache.account,
          password: cache.password,
        }}
        onFinish={onFinish}
      >
        <Form.Item
          name="account"
          rules={[
            {
              required: true,
              message: "请输入用户名或邮箱!",
            },
          ]}
        >
          <Input prefix={<UserOutlined />} placeholder="用户名/邮箱" />
        </Form.Item>
        <Form.Item
          name="password"
          rules={[
            {
              required: true,
              message: "请输入密码!",
            },
          ]}
        >
          <Input.Password
            prefix={<LockOutlined />}
            type="password"
            placeholder="密码"
          />
        </Form.Item>
        <Form.Item>
          <Form.Item name="remember" valuePropName="checked" noStyle>
            <Checkbox>记住密码</Checkbox>
          </Form.Item>
          <Link to="/login/forget" style={{ float: "right" }}>
            忘记密码
          </Link>
        </Form.Item>
        <Form.Item>
          <div>
            <Link to="/login/authcode">验证码登录</Link>
          </div>
          <Button
            type="primary"
            htmlType="submit"
            className={styles.loginFormButton}
          >
            登录
          </Button>
          <div>
            还没有账号？<Link to="/login/register">注册</Link>
          </div>
        </Form.Item>
      </Form>
    </div>
  );
}

export default Account;