前端防刷实现

发表于 更新于 分类于 本文字数： 1.5k 阅读时长 ≈ 1 分钟

前段时间写了前端防刷逻辑 作此记录
当时的需求

防刷逻辑 1 24 小时内 一个手机号只能提交三次 第四次提交的时候 提示 已提交成功 请耐心等待 400
防刷逻辑 2 24 小时内 提交三个手机号 提交第四个时 提示 401

步骤一 页面加载 获取 cookie 中当前的信息

1
2
3
4
5
 componentDidMount() {
    // 获取cookie里存的用户信息
    let cookieSaveInfo = getCookie(COOKIE_CONFIG.FINANCIAL_SAVE_INFO) || "{}";
    //todo...
}

点击保存按钮 防刷逻辑

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

saveInfo = () => {
   const { userInfoFromCookie, setModal } = this;
  
   // 获取手机号列表
   let phoneList = Object.keys(userInfoFromCookie); // ['12','21212','212']
  
   // 获取当前存的手机号的个数
   let phoneListLength = phoneList.length;
   // 当前输入的存在手机号列表中
   if (phone in userInfoFromCookie) {
       if (userInfoFromCookie[phone] >= 3) {
           // 当前的手机号存在手机列表中 看当前是第几次 大于三次提示
         
          setModal(400);
          //todo...
           return; //防御式编程
       }
   } else if (phoneListLength >= 3) {
       // 如果当前列表中已经有三个不同的手机号 则提示401
       setModal(401);
       return;
   }
   //可以发起请求
   
}

请求成功的回调

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 saveFunc = (resData) => {
    
   let thePhoneCount = userInfoFromCookie[phone] || 1;
   if (resData.error_code === 200) {
   
       // 存cookie 规则 看下当前手机号在不在列表里 在的话 就更新次数 不在的数就设置这个key
       if (phone in userInfoFromCookie) {
           userInfoFromCookie[phone] = thePhoneCount + 1;
       } else {
           userInfoFromCookie[phone] = thePhoneCount;
       }
       // cookie存储
       setCookie(COOKIE_CONFIG.FINANCIAL_SAVE_INFO, JSON.stringify(userInfoFromCookie), 24 * 60 * 60);
   }
 
}