通过Cookie实现登录页面“记住我”功能

通过Cookie实现登录页面“记住我”功能

// 逻辑
const { run: login, loading } = useFetch(userService.login, {
    manual: true,
    onSuccess: (data) => {
      setToken(data.token);
      setLocalLanguage('');
      setCookie('token', data.token);
      setUserInfo();
      navigate('/');
    },
  });
  
  useEffect(() => {
    const username = getCookie('username');
    const password = Base64.parse(getCookie('password') ?? '').toString(UTF8);
    if (username) {
      form.setFieldValue('username', username);
      form.setFieldValue('password', password);
    }
  }, []);

  const setUserInfo = () => {
    if (form.getFieldValue('remember')) {
      setCookie('username', form.getFieldValue('username'), 1);
      const password = Base64.stringify(UTF8.parse(form.getFieldValue('password')));
      setCookie('password', password, 1);
    } else {
      setCookie('username', '');
      setCookie('password', '');
    }
  };

  const getCookie = (key: string) => {
    if (document.cookie.length > 0) {
      let start = document.cookie.indexOf(key + '=');
      if (start !== -1) {
        start = start + key.length + 1;
        let end = document.cookie.indexOf(';', start);
        if (end === -1) {
          end = document.cookie.length;
        }
        return decodeURIComponent(document.cookie.substring(start, end));
      }
    }
  };

  const setCookie = (name: string, value: string, expire: number = 1) => {
    const expDate = new Date();
    expDate.setDate(expDate.getDate() + expire);
    document.cookie = name + '=' + encodeURIComponent(value) + (expire === null ? '' : ';expires=' + expDate.toUTCString());
  };
  
  // JSX
  {/* 记住密码 */}
  <Checkbox defaultChecked={getCookie('username') ? true : false}>{t('remember_me')}</Checkbox>