Reactjs 确保只有对象的所有者才能编辑/删除

我在应用程序（NodeJS）的后端部分执行RBAC和授权，但从未真正考虑在UI上强制执行授权

但是，假设我有以下4条路由：

  <Switch>
    <Route exact path="/books/all" component={BookList} />
    <Route exact path="/books/new" component={BookNew} />
    <Route exact path="/books/:bookId" component={BookDetails} />
    <Route exact path="/books/:bookId/edit" component={BookEdit} />
  </Switch>

但我想知道在ReactJS中是否有更好的方法/设计模式？我想知道是否从路线中完全删除

bookId

，只需推动

edit

和

bookId

等道具：

---

我建议在

BookEdit

组件中进行条件渲染（特别是当您需要执行异步操作以确定授权时）

为了使基于角色/身份验证的路由保持简单，我不会在这里使用私有路由

在编辑组件中：检查授权，如果为false，则将其作为错误处理并呈现错误组件（错误消息和后退按钮，也可以是404视图），否则呈现编辑组件

为了保持一致，您还必须确保没有指向此错误的链接（如果未经授权，则图书视图上的条件禁用“编辑”按钮）

示例（使用异步检查，这里可能不是您的情况，但这是一个总体思路）：

类EditComponent扩展了React.Component{ 状态={ 加载：对， 错误：null， bookProps:null， }; componentDidMount（）{ const{match，userId}=this.props； getBook（match.params.bookId）//请求书本道具 .然后（书=>{ 如果（book.ownerId！==userId）{//授权检查 this.setState（{error:'Unauthorized'，load:false}）； }否则{ this.setState（{bookProps:book，load:false}）； } }) .catch（错误=>{ this.setState（{error:err.message，loading:false}）； }); } render（）{ const{loading，error，bookProps}=this.state； 如果（装载）{ 返回； } 如果（错误）{ 返回； } 返回； } }

---

我使用了一种类似的方法：这就是我目前处理这个问题的方式。我想知道它是否被社区广泛接受。

  checkAuthorisation = userId => {
    if (this.props.authenticated._id !== userId) {
      this.props.history.push("/books/all");
    }
  };