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

【问题标题】：How to implement multi role based authorization in React如何在 React 中实现基于多角色的授权
【发布时间】：2020-06-21 01:17:44
【问题描述】：

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

谢谢

【问题讨论】：

您能发布一些您为完成任务而遵循的代码或方法吗？
@NotABot 实际上，我的应用程序中有不同的仪表板，我想为不同的用户（如管理员、经理等）显示单独的仪表板
我在问什么你为此申请的任何逻辑？
@NotABot no ，目前我没有实现任何逻辑。我被卡住了，我想问一下逻辑
查看您何时验证用户，然后将用户的角色存储在localStorage或任何您熟悉的其他存储。然后在渲染 UI 之前，只需检查用户的角色是什么，然后 render UI.

标签： javascript reactjs ecmascript-6 react-redux react-router

【解决方案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}
    </>
  );
};

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

<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>

【讨论】：

感谢您的回答，能否请您指导我granPermission 的用途？
太好了，我如何有条件地渲染 UI。意思是我想呈现单独的仪表板，如 admin,manager
您可以为每个角色使用不同的路径，也可以对组件渲染执行相同的操作。我已经更新了答案。请再次检查。
还有一件事，当我尝试在 rolebasedRouting.jsx 中控制台角色={['ROLE_ADMIN']} 时，我得到了所有这三个道具。我只想要请求的路线道具（角色）
你能分享你的代码、你的日志并详细说明你想做什么

【解决方案2】：

您应该为所有角色创建不同的路由组件，例如，AdminRoute，UserRoute等，在这些组件中，您可以检查天气登录人是管理员还是普通用户。

或者创建一个通用的路由组件并在那里传递角色和路径作为道具

【讨论】：

你能不能写一个简单的例子，它会帮助我节省一天的时间

【解决方案3】：

您可以使用 HOC 检查访问路由的用户是否被允许访问，即尝试访问管理仪表板的用户是否是管理员。如果没有，那么可以将他重定向到您喜欢的任何地方。

export default function withAuth(WrappedComponent) {


const auth = (props) => {
    return (
        localStorage.getItem("userRole") === "admin" ?
        <WrappedComponent {...props} /> :
        <Redirect to = {{ 
            pathname: "/protected/login"
        }} />
    )
}

return auth;
}

或者您可以在 localStorage 中维护一个 features 数组，其中包含您想要授予用户访问权限的功能。

【讨论】：