如何在 React 中实现基于多角色的授权

Question

我正在开发具有不同多角色（管理员、用户、经理）的应用程序，我想保护管理员的路径不受经理的影响，一般用户也根据用户角色呈现 UI。我试过但我失败了有人可以帮助我如何实现我的目标。 示例将不胜感激

谢谢

Answer 1

请注意，这不是最佳解决方案，只是为了给您一些想法。

创建文件 RoleBasedRouting.jsx

function RoleBasedRouting({
  component: Component, roles, ...rest
}) {
  return (
    <>
      { grantPermission(roles) && (
      <Route
        {...rest}
        render={(props) => (
          <>
            <Component {...props} />
          </>
        )}
      />
      )}
      {
        !grantPermission(roles) && (
          <Route
            render={() => (
              <>
                <Unauthorized /> // Unauthorized Page View (skippable)
              </>
            )}
          />
        )
      }
    </>
  );
}

像这样在您的路由器中使用它 -

<Switch>
     <RoleBasedRouting exact path="/admin" component={AdminPage} roles={['ROLE_ADMIN']} />
     <RoleBasedRouting exact path="/user" component={UserPage} roles={['ROLE_USER']} />
     <RoleBasedRouting exact path="/manager" component={ManagerPage} roles={['ROLE_Manager']} />
     ...............
</Switch>

在grantPermission函数中，检查登录用户是否具有所需的角色。样本 -

export const grantPermission = (requestedRoles) => {
  const permittedRoles =  JSON.parse(localStorage.getItem('userRoles'));
 // in case of multiple roles, if one of the permittedRoles is present in requestedRoles, return true;
  return false;
};

要有条件地呈现 UI，您可以做基本相同的事情。编写一个组件UnlockAccess——

const UnlockAccess = ({ children, request }) => {
  const permission = grantPermission(request); // request = ['ROLE_ADMIN'] / ['ROLE_USER'] / ['ROLE_MANAGER']
  return (
    <>
      {permission && children}
    </>
  );
};

现在，像这样UnlockAccess在Dashboard页面中使用组件-

<Dashboard>
    <UnlockAccess request={['ROLE_ADMIN']}>
         <>
              {/*Write code/components for Admin Dashboard*/}
         </>                    
    </UnlockAccess>
    <UnlockAccess request={['ROLE_USER']}>
         <>
              {/*Write code/components for User Dashboard*/}
         </>                    
    </UnlockAccess>
    <UnlockAccess request={['ROLE_MANAGER']}>
         <>
              {/*Write code/components for Manager Dashboard*/}
         </>                    
    </UnlockAccess>
</Dashboard>