Question

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

Answer 1

创建一个自定义钩子，如下所示：-

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>
    )
}

或者将admin视为permission。向其传递一些用于不同路由的网址，它将处理该网址。

Answer 2

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

Answer 3

您绝对可以使用Higher Order Component完成此操作。只需为登录时的用户设置状态，例如“ admin”或“ basic_user”。根据此状态，某些按钮或表单将可供用户访问。您还可以将这些访问权限保存到您的后端，并在用户登录时在HOC中调用它。

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

3 个答案: