Javascript 如何拦截组件以检查权限

我有很多静态表单，当用户单击主菜单并进入特定路线时，我会向用户显示这些表单，我现在要做的是检查何时进入路线，该组件是否具有访问权限，我可以通过向服务器发送一个简单的

post

来实现这一点，但我感到困惑，我不知道应该在哪里进行检查或

post

以下是我想到的一些解决方案：
1-编写一个

高阶组件

并用它包装每个静态组件
2-在父类中执行此检查时，创建基类并使每个静态窗体继承它
3-或者可能使用路由作为解决方案，因为我使用的是

react路由器

？
我将感谢任何帮助或提示。

---

谢谢。

您完全可以使用

高阶组件来完成此任务。只需在登录时为用户设置一个状态，如“admin”或“basic_user”。根据该状态，一些按钮或表单将可供用户访问。您还可以将这些访问权限保存到后端，并在用户登录时在HOC中调用它。
创建自定义挂钩，如下所示：-

const useAdmin = (url:string) => {
    const [admin, setAdmin] = React.useState(false);

    React.useEffect(() => {
        post(url, {some: body}).then(res => {
            setAdmin(res.admin);
        }).catch(err => {
            setAdmin(false);
        });
    }, [])

    return [admin];
}

然后在任何地方使用它：-

const mycomponent = props => {
    const [admin] = useAdmin('https://foobar.com/checkPermission');

    //Rest of the logic according to the variable 'admin'
    return (
        <div>
            {
                admin? <div/>:null
            }
        </div>
    )
}

const mycomponent=props=>{
const[admin]=useAdmin（'https://foobar.com/checkPermission');
//根据变量“admin”的其余逻辑
返回(
{
管理员？：空
}
)
}

或者将
管理员
视为
权限
。给它传递一些不同路由的url，它会处理它。
我也会使用
react-router
做类似的事情。我制作了自己的路由组件，它围绕
react router
的路由进行包装，检查权限并有条件地呈现路由或重定向

如果您每次都在进行api调用，那么它看起来与此类似

class AppRoute extends Component {
  state = {
    validCredentials: null
  }

  componentDidMount() {
    // api call here + response
    if (ok) {
      this.setState({validCredentials: true})
    } else {
      this.setState({ validCredentials: false})
    }
  }

  render() {
    const { validCredentials } = this.state
    if (validCredentials) {
      return <Route {...this.props} />
    } else if (validCredentials === false) {
      return <Redirect to="somewhere"/>
    }
    return null
  }
}

类批准扩展组件{
状态={
validCredentials:空
}
componentDidMount（）{
//api在此调用+响应
如果（确定）{
this.setState（{validCredentials:true}）
}否则{
this.setState（{validCredentials:false}）
}
}
render（）{
常量{validCredentials}=this.state
如果（有效的重新定义）{
返回
}else if（validCredentials===false）{
返回
}
返回空
}
}