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

我在应用程序中工作，我有不同的多角色（管理员，用户，经理），我想保护从经理和一般用户的管理路线也呈现基于用户角色的用户界面。我试过了，但失败了。有人能帮我实现我的目标吗。 请举例说明

---

谢谢

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

---

或者创建一个常规路线组件，并将角色和路径作为道具传递到那里

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

创建一个文件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)
              </>
            )}
          />
        )
      }
    </>
  );
}

要有条件地呈现UI，基本上可以做相同的事情。编写组件

解锁访问

-

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

---

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

export default function withAuth(WrappedComponent) {


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

return auth;
}

使用auth导出默认函数（WrappedComponent）{
const auth=（道具）=>{
返回(
localStorage.getItem（“用户角色”）=“管理员”？
:
)
}
返回auth；
}

---

或者，您可以在localStorage中维护一个功能阵列，其中包含您希望授予用户访问权限的功能。

您可以发布一些代码或实现任务所遵循的方法吗？@NotABot事实上，我的应用程序中有不同的仪表板，我想为不同的用户显示单独的仪表板，如admin，经理等等，我想问的是您对此应用了什么逻辑？@NotABot不，目前我没有实现任何逻辑。我被卡住了，我想询问有关logicSee的信息，请在验证用户身份时查看，然后将用户角色存储在

localStorage

或您熟悉的任何其他存储中。然后在呈现UI之前，只需检查用户的角色是什么，然后呈现

UI

。请您写一个简单的示例，它将帮助我节省一天的时间。谢谢您的回答，您能告诉我

granpowmission

用于什么吗？太好了，我如何有条件地呈现UI。意思是我想呈现单独的仪表板，如管理员、管理员。您可以为每个角色使用不同的路径，也可以为组件呈现执行相同的操作。我已经更新了答案。请再次检查。还有一件事，当我试图在rolebasedRouting.jsx中控制台roles={['ROLE_ADMIN']}时，我得到了所有这三个道具。我只需要请求的路由道具（角色），您可以共享您的代码、日志并详细说明您想做什么

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

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

export default function withAuth(WrappedComponent) {


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

return auth;
}