2023积累

一、如何实现umi框架下的权限控制

使用umi的2个plugin。@umijs/plugin-initial-state + @umijs/plugin-access
plugin-initial-state
plugin-access

参看文档：点击
功能：

1. 实现对url的权限控制。即：地址栏输入也不会展示
2. 实现个别按钮的展示。包含：左侧菜单的控制

优点：

• 能够把权限控制的逻辑统一放到access.tsx文件下 集中管理，避免某个字段改了得全局改动
• 提供的标签和useAccess能很方便在组件内部控制 按钮的权限和 菜单的展示

缺点：

• 只能在proLayout 5版本实现

ProLayout低版本的解决方案

• 通过配置Prolayout的的属性menuData里的hideInMenu，直接能控制左侧菜单按钮的显示和隐藏。
• 通过自己封装的组件中的authority属性（路由里的authority数组来赋值）来控制是否跳转到403

二、Xxx的使用方式2

三、flateMap

flatMap() 是 JavaScript 数组方法之一，它可以将一个数组中的每个元素通过某种方式映射成一个新的数组，最终将所有的数组合并成一个新的数组并返回。相当于先对数组进行 map() 操作，再对返回的数组进行 flat() 操作，但是 flatMap() 方法可以将这两个操作合并为一个，提高代码的可读性和性能。

flatMap() 方法接受一个回调函数作为参数，这个回调函数可以接受三个参数：当前元素、当前元素的索引和当前数组。回调函数需要【返回一个新的数组】，这个数组会被 flatMap() 方法合并到最终的结果中。

下面是一个使用 flatMap() 方法的例子，假设我们有一个包含多个数组的数组，我们需要将所有数组中的元素合并到一个新的数组中：

const arr = [[1, 2], [3, 4], [5, 6]];
const flatArr = arr.flatMap((subArr) => subArr);

console.log(flatArr); // [1, 2, 3, 4, 5, 6]

需要注意的是，flatMap() 方法只会展开一层，如果要展开多层嵌套的数组，可以使用递归或者其他方法来处理。此外，flatMap() 方法是 ES2019 标准中新增的方法，如果需要兼容较老的浏览器，需要进行相应的兼容处理。

fill 和 from

fill() 和 from() 都是 JavaScript 中的数组方法。

fill() 方法用于将数组中的所有元素都替换为指定的值，可以接受一个值和两个可选参数（开始位置和结束位置）。例如：

const arr = [1, 2, 3];
arr.fill(0);

console.log(arr); // [0, 0, 0]

在上面的例子中，我们将 arr 数组中的所有元素都替换为 0。

from() 方法用于从一个类数组对象或可迭代对象中创建一个新的数组。它接受一个类数组对象或可迭代对象和一个可选的回调函数作为参数。回调函数会接收三个参数：当前元素、当前元素的索引和原始对象。回调函数可以返回一个新的值，用于替换当前元素。例如：

const set = new Set([1, 2, 3]);
const arr = Array.from(set, (num) => num * 2);

console.log(arr); // [2, 4, 6]

在上面的例子中，我们使用 from() 方法从 set 集合中创建了一个新的数组，并将每个元素都乘以 2。需要注意的是，Set 对象是 ES6 中新增的数据类型，它表示一组无序且唯一的值，可以用来去重或者进行其他操作。

需要注意的是，fill() 和 from() 方法都会修改原始的数组或创建一个新的数组，如果不想修改原始的数组，可以使用 slice() 方法创建一个新的数组进行操作。