React实现基于角色的授权后访问权限页面出现无限刷新问题求助

问题原因 #

• 缺少/page-error-404的路由配置，且该页面未排除权限校验
  你当前的路由列表中没有定义404页面对应的路由规则，权限校验不通过触发重定向到该地址时，<Switch>无法匹配到对应路由，会反复触发路由匹配和校验逻辑，形成重定向循环。
• localStorage读取逻辑缺少异常捕获，易触发渲染报错
  你在CheckUser和CheckAdmin中直接读取JSON.parse(localStorage.getItem("ConnectedUser"))[0]['Role']，如果localStorage中不存在ConnectedUser字段、存储内容不是合法JSON、或者存储内容不是数组结构，都会直接抛出JS异常，导致页面渲染失败触发自动重加载，形成无限刷新。
• 权限判断逻辑存在边界疏漏
  你只判断了item !== null，但没有处理item为undefined、localStorage读取失败的场景，这类异常场景都会触发重定向分支，如果重定向逻辑存在问题就会形成循环。

修复方案 #

1. 补全404页面的路由配置 #

在路由列表末尾添加无角色限制的404路由，确保重定向后可以正常匹配：

{ url: "ecom-orders", component: Orders, role:'admin' },
{ url: "ecom-myorders", component: Myorders, role:'user' },
{ url: "ecom-ordersbyuser/:userid", component: OrdersByUser },
{ url: "AddProduct", component: AddProduct, role:'admin' },
// 新增404路由，不要加role属性
{ url: "page-error-404", component: PageError404 },

2. 给localStorage读取逻辑加异常捕获和边界处理 #

修改CheckUser和CheckAdmin的代码，增加容错处理：

const CheckUser = ({ component: Component, ...props }) => (
  <Route
    {...props}
    render={routeProps => {
      let role = null;
      // 捕获读取异常
      try {
        const userData = JSON.parse(localStorage.getItem("ConnectedUser"));
        if (Array.isArray(userData) && userData.length > 0) {
          role = userData[0]?.Role;
        }
      } catch (e) {
        console.error("读取用户权限失败", e);
      }
      return role == 1 ? (            
        <Component {...routeProps} />                     
      ) : (
        <Redirect to="/page-error-404" />  
      );
    }}
  />
);

const CheckAdmin = ({ component: Component, ...rest }) => (
  <Route
    {...rest}
    render={props => {
      let role = null;
      try {
        const userData = JSON.parse(localStorage.getItem("ConnectedUser"));
        if (Array.isArray(userData) && userData.length > 0) {
          role = userData[0]?.Role;
        }
      } catch (e) {
        console.error("读取用户权限失败", e);
      }
      return role == 2 ? (
        <Component {...props} />
      ) : (           
        <Redirect to="/page-error-404" />  
      );
    }}
  />
);

3. 可选优化 #

建议不要用数组索引作为路由的key，可以改用data.url作为key，避免路由顺序调整时出现异常渲染问题。

内容的提问来源于stack exchange，提问作者Ahmed Mhadhbi