时间戳

首页 > 解决方案 > 如何在 React 中实现 RBAC？

javascript - 如何在 React 中实现 RBAC？

问题描述

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

标签： javascriptnode.jsreactjsmernrbac

解决方案

您可以创建一个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'} />
};

推荐阅读