如何在 React 中实现 RBAC？答案

【问题标题】：How to implement RBAC in react?如何在 React 中实现 RBAC？
【发布时间】：2021-11-26 10:19:45
【问题描述】：

我想在我的 React 项目中实现 RBAC，在这里我有不同的角色，比如 ADMIN、SUPERADMIN 等，我将该用户角色存储在 LocalStorage 中并根据用户角色显示信息，所以如果用户是 ADMIN 实际发生了什么localStorage 中的那个商店只能访问有限的东西，但是当他从 dev 或控制台的 localstorage 将其角色更改为 SuperAdmin 时，他获得了 SuperAdmin 的所有访问权限，我能做什么？

【问题讨论】：

标签： javascript node.js reactjs mern rbac

【解决方案1】：

您可以创建一个Middleware，以便该中间件的每条路由passed 或render，这是一种更好的方法，您可以在中间件中使用API 调用来检查角色。

例子：

PrivateRoute.tsx

import React, { useContext, useEffect } from 'react'
import { Redirect, Route } from 'react-router-dom'

export const PrivateRoute = props => {
  // Get User info from local storage
  const userData = localStorage.getItem('user')
  const userRole = userData?.role;

  useEffect(() => {
    // do something here for async check
  },[])

  const hasPermission = useMemo(() => {
      // some condition checks for roles access for perticluar module
      return ...
  }, [userRole]);


  if (hasPermission) {
    return <Route {...props} />
  }

  return <Redirect to={'Some Path'} />
};

【讨论】：

我想根据用户登录时的角色来呈现 UI 或导航栏实际上会发生什么，那么我应该将用户登录时获得的角色存储在哪里如果我将那个东西存储在会话 cookie 或本地存储比用户可以更改它访问我只想显示 SuperAdmin 的导航栏。
是的，因此您需要检查中间件中的内容并将其存储在您的状态或全局状态中，而不是本地存储中。

【解决方案2】：

事实是在前端处理这种授权是不够的。您可以要求您的后端告诉您用户是 ADMIN 还是 SUPERADMIN 或其他。然后，您可以将此身份验证状态存储在状态管理中，以便之后轻松访问。

为了实现不同的情况，你可以使用看守一些路由或者根据用户的类型有条件地渲染组件。

在我看来，HOCs（用它们包装组件）和conditional rendering 可以帮助您处理 RBAC。

【讨论】：

是的，当用户登录时，我得到了该角色，您知道如何将该角色存储在状态中，页面刷新时实际发生的情况很清楚，因此我无法实现这些。
如果你使用 redux，你可以使用redux-persist。否则，在安装 App 组件时使用本地存储保存用户角色或重新获取用户角色。