javascript - 如何拦截组件以检查权限

Question

我有很多静态表单，当他单击主菜单并转到特定路线时，我会向用户显示这些表单，我现在要做的是检查当该组件是否有权访问时，我可以通过做一个简单post的服务器来做到这一点，但我很困惑，我不知道应该在哪里做这个检查或post。
以下是我想到的一些解决方案：
1- 编写一个Higher order component并用它包装每个静态组件
2- 创建一个基类并让每个静态表单在父类中进行此检查时继承它
3- 或者使用路由作为一个解决方案，因为我正在使用react-router？
我将不胜感激任何帮助或提示。谢谢。

标签： javascriptreactjsdesign-patternsreact-router

Answer 1

我也使用类似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
  }
}