前言

在日常业务开发中，经常会有类似的需求：编辑功能只有部分白名单中的人才可以操作，否则设置为disabled，那么我们是如何实现白名单需求的呢？

白名单：白名单的概念与“黑名单”相对应。白名单是设置能通过的用户，白名单以外的用户都不能通过。黑名单是设置不能通过的用户，黑名单以外的用户都能通过。

实现

原理：通过cookie获取到用户登录的账号，进行白名单判断

cookie 处理

通过document.cookie获取到当前的cookie 此时的cookie是一段字符串，需要将每对key-value 转换为对象的形式

/**
 * 
 * @param str document.cookie获取到的cookie
 * @returns 
 */
function cookieParse(str: string): any {
  const cookie: any = {};
  const cookieArr = str.split(';');
  for (let i = 0; i < cookieArr.length; i++) {
    const cookieItem = cookieArr[i].split('=');
    // 判断key和value均存在
    if (cookieItem[0].length > 1 && cookieItem[1]) {
        // trim方法将key的两端去掉空白字符
      cookie[cookieItem[0].trim()] = cookieItem[1];
    }
  }
  return cookie;
}

调用方法，获取到的cookie格式

白名单处理

原理：通过判断cookie中的用户是否在指定的白名单列表中能够获取到，如果存在，返回true，否则返回false

/**
 * 
 * @param cookiestr document.cookie获取到的cookie
 * @param userName 用户对应的key
 * @returns 
 */
function ifEditWhiteList(cookiestr: string,userName:string): boolean {
  const whiteList = [
    '12313133@qq.com',
    'test@qq.com',
    '12313133@qq.com',
    '1223133@qq.com',
    '1243133@qq.com',
    '1231533@qq.com',
  ];
  // cookie不存在
  if (!cookiestr) {
    return false;
  }
  // 调用cookieParse方法获取cookie对象
  const cookie = cookieParse(cookiestr);
  // key对应的value不存在
  if (!cookie[userName]) {
    return false;
  }
  const email = cookie[userName].replace(/"/g, '');
  console.log('email', email);
  return whiteList.indexOf(email) !== -1;

结果如图所示：

总结

因为白名单需求普遍存在，所以封装一套方法，可以提高开发效率

业务：快速解决白名单

前言

实现

cookie 处理

白名单处理

总结