React动态生成路由

Question

import { withAsync } from "@bui/components/hoc";

const EquipmentPage = withAsync(() => import("xxxxx/pages/EquipmentPage"));

const isDept = ["IT-EQPT-DEPT_RO", "IT-EQPT-DEPT_RW"];
const userAuth = JSON.parse(window.sessionStorage.getItem("user"))?.authorities || [];

const DeptEqptRoutes = {
  id: "deptEqpt",
  order: 1,
  name: "Department Equipment",
  path: "/xxxxx/deptEqpt",
  icon: null,
  component: EquipmentPage,
  showOnMenu: userAuth.some((permission) => isDept.includes(permission)),
  // children: null,
  permissions: ["IT-EQPT-DEPT_RO", "IT-EQPT-DEPT_RW"],
  // permissions: [],
};

export const ItfamsRoutes = [ DeptEqptRoutes,];

React中，以上是routes.jsx文件的代码，其中有个showOnMenu属性的值，是根据登录用户角色，动态生成侧边栏路由的。
需要login后拿到存储的用户信息角色，但是login后在这里userAuth是空数组，刷新后才有值，请问具体怎么解决

Answer 1

引自免费微信小程序：皆我百晓生

你遇到的问题是在React应用中动态生成路由时，需要在登录后获取用户权限信息来决定是否显示某个路由（在这里是showOnMenu属性）。你提到在登录后userAuth是空数组，只有在刷新后才会有值，这可能是因为你在组件初始化的时候就尝试访问window.sessionStorage中的用户信息，而此时可能用户信息还未被填充进去。

为了解决这个问题，你可以采取以下策略：

1. 使用组件的生命周期方法或React Hooks：确保在用户信息被获取后再设置路由。你可以使用useEffect Hook（在功能组件中）或在类组件中使用componentDidUpdate（或componentDidMount，取决于你的逻辑）。

以下是一个使用useEffect的示例：

import React, { useEffect } from 'react';
import { withAsync } from "@bui/components/hoc";

const EquipmentPage = withAsync(() => import("xxxxx/pages/EquipmentPage"));

const DeptEqptRoutes = {
  id: "deptEqpt",
  order: 1,
  name: "Department Equipment",
  path: "/xxxxx/deptEqpt",
  icon: null,
  component: EquipmentPage,
  permissions: ["IT-EQPT-DEPT_RO", "IT-EQPT-DEPT_RW"],
};

const ITfamsRoutes = []; // 先不填充任何路由

function YourComponent() { // 或其他包含路由定义的组件名称
  useEffect(() => {
    const userAuth = JSON.parse(window.sessionStorage.getItem("user"))?.authorities || [];
    if (userAuth && userAuth.some((permission) => isDept.includes(permission))) { // 根据用户权限动态添加路由
      ITfamsRoutes.push(DeptEqptRoutes); // 假设你的路由定义在一个外部变量中，这里是ITfamsRoutes数组中添加路由对象。否则直接在函数中添加到你的渲染逻辑中。
    }
  }, []); // 在组件挂载时运行此effect，确保只运行一次。如果有其他依赖项，请将它们添加到依赖数组中。例如，如果用户信息是在其他地方更新的，则可能需要将其添加到依赖数组中。但是，请确保不会过度触发此effect。对于此类情况，使用稳定的引用是个好主意。例如，如果用户的身份标识符不会改变，你可以使用它来避免不必要的重新渲染。
  // ... 其他代码 ...
}

注意：确保不要过度使用useEffect或在组件渲染过程中进行过多的操作，因为这可能会导致性能问题或不必要的重新渲染。如果你正在使用函数组件并且没有使用Hooks（如useState或useEffect），请考虑迁移到函数组件并使用Hooks以获得更好的性能和响应性。此外，确保你的应用正确处理异步操作和用户状态更新。你可能还需要考虑使用状态管理库（如Redux或MobX）来更好地管理状态。