时间戳

首页 > 解决方案 > React 在最高组件中保持状态

reactjs - React 在最高组件中保持状态

问题描述

我正在尝试创建一个 React RBAC 系统，其中我的后端有一个名为role: adminexample 的字段，它告诉用户拥有的访问权限。成功登录后，我将用户定向到特定路线（使用受保护的路线），但我想检查用户是否具有许可级别（如果角色是管理员而不是一般）。我想如果我保持一个状态，我正在路由存储用户的角色，我可以检查用户是否具有所需的访问权限并相应地发送给他，但我不确定这是否是一个好方法以及如何去做.

App.js - RequireAuth 只检查用户会话是否存在（然后将其重定向到登录）

class App extends React.Component {
  constructor(props) {
    super(props);
   }

  render() {
  return (
    <div>
      <Router>
            <Switch>
              <Route exact path = '/'
                component = {LandingPage}
              />
              <Route exact path = '/register'
                component = {Register}
              />
              <Route exact path = '/addBill'
                component = {RequireAuth(AddBill)}
              />
              <Route exact path = '/addItem'
                component = {RequireAuth(AddItem)}
              />
              <Route exact path = '/deleteItem'
                component = {RequireAuth(DeleteItem)}
              />
            </Switch>
      </Router>
    </div>
  );
}
}

export default withRouter(App);

SignIn.js（如果登录成功，我只是将用户路由到端点，否则显示错误消息）

if(status === 200) {
   this.props.history.push('/addItem')
}

RequireAuth 无权访问用户的角色，但我想在此实现 RBAC。

标签： reactjsreact-routerrbac

解决方案

添加您的权限数据，例如：Roles到全局 App State/Store，您可以使用 React 上下文 API 轻松完成此操作。

//these will probably go in a file AppProvider.js
    const AppContext = React.createContext({userRole:'general', setUserRole: ()=>{}});
    
    const AppProvider = ({children}) => {
       const [userRole,setUserRole] = React.useState('general');
    
       return <AppContext.Provider value={{ userRole, setUserRole }}>{children}</AppContext.Provider>
    }

//end AppProvider.js
    
    const RequireAuth = (component) => {
       const {userRole} = React.useContext(AppProvider);
       const Component = () =>  {
         //check your RBAC logic here now that you have access to userRole
       }
    
       return Component;
    }

推荐阅读