前言

之前对后台系统的数据权限进行了深入的探索，发现了存在的一些问题。

本篇着重从表格数据权限聊起，讲一下表格数据权限的兜底策略实现方案。

表格数据权限的兜底

权限控制不了"手动挡"，但是前端可以。

虽然有些后知后觉，但是我登时就想到了两种兜底方案。

方案一：表格组件增加必须入参的校验

该方案很适合，已经二次封装了表格组件。

我们在引入了第三方UI库之后，会使用UI库提供的表格组件，节省开发成本。

其实，还可以根据实际情况进行二次封装，二次封装的内容包含搜索项、导出操作、表格展示、表格数据请求等。

如下截图，大部分的表格页面基本都是类似的功能结构：

通用表格组件：List

1、组件增加了两个入参：

• requireFlag：是否校验必须入参的布尔值，默认为false，兼容所有不需要校验的页面。
• requireValue：必须入参的值，无默认值。

2、当符合需要校验必须参数且参数值为空时，表格数据设置为空数组。

// requireFlag的值默认为false
const { http, requireFlag = false, requireValue, pageParams } = props;

/**
 * 表格数据查询方法
 */
const query = () => {
  // =>true: 如果需要校验必须参数且参数值为空时，则表格数据为空的数组值
  if (requireFlag && !requireValue) {
    setList([]);
  } else {
    const params = { ...searchParams, ...pageParams, page, size };
    http(params).then(res => {
      setList(res.list)
    });
  }
};

活动管理页

引入组件之后，传入requireFlag和requireValue的实际值。

import { List } from '@/components';

<List http={getList} requireFlag='true' requireValue={record.id} pageParams={pageParams} />;

方案二：新增必须入参校验的组件

这个方案是通用的，无论前面有没有封装表格组件，都可以用方案二。

表格数据权限通用组件

表格回显的区分：

• 必须参数值不存在，展示空表；
• 必须参数值存在，展示正确的数据。

/**
 * @description 表格数据脱敏业务组件 
 */
import React from 'react';
import PropTypes from 'prop-types';
import { Table } from 'antd';

const CommonTableDataDesensitize = ({ data, children }) => {
  const { columns, requiredVal } = data;

  return <div>{requiredVal ? <>{children}</> : <Table dataSource={[]} columns={columns} rowKey={record => record.id} pagination={false} size="small" />}</div>;
};

CommonTableDataDesensitize.propTypes = {
  data: PropTypes.object.isRequired, // 组件入参 必传
};

CommonTableDataDesensitize.defaultProps = {
  data: {},
};
export default CommonTableDataDesensitize;

活动管理页

引入组件之后，将脱敏组件包裹在正确的数据内容外层并传入表格项的值和必须参数的值即可。

import { CommonTableDataDesensitize } from '@/Components';
......
<CommonTableDataDesensitize data={{ columns: columns, requiredVal: '必须参数的值' }}>
  <Table columns={columns}/>
</CommonTableDataDesensitize>

以不变应万变

数据权限没有做全做好的问题，在功能没有出现bug前，是不好感知的，最好能想个法子提前进行规避。

我突然想到，之前看到《破事精英2》中的某一集，莫菲教金秘书用三连问的方式直击别人的灵魂。

于是，我思考三连问在开发中的可行性。连续追问，可以加深大脑对当时环境的印象，也可帮助后续产生相关性的联想。

所以，每次遇到数据权限类的功能呢，都先问自己三个问题：

• 数据的权限做了吗？
• 情况都考虑完全了吗？
• 需不需要做个兜底？

这样一来，可能之后都会养成思考在前的好习惯。

作者介绍

非职业「传道授业解惑」的开发者叶一一。

《趣学前端》、《CSS畅想》等系列作者。华夏美食、国漫、古风重度爱好者，刑侦、无限流小说初级玩家。

如果看完文章有所收获，欢迎点赞👍 | 收藏⭐️ | 留言📝。