ReactJS 确保只有对象的所有者可以编辑/删除

IT技术 reactjs
2022-08-04 01:47:37

我在应用程序（NodeJS）的后端部分执行 RBAC 和授权，并且从未真正关心在 UI 上强制执行授权。

但是，假设我有以下 React Router 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>

而且我想确保如果登录用户访问了一本不是他的书，他将无法呈现路线/books/<not my book>/edit。我可以通过在ComponentDidMount()函数中实现一个简单的检查来做到这一点：

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

但我想知道在 ReactJS 中是否有更好的方法/设计模式？我想知道是否bookId完全从路线中删除并只推送类似editand的propsbookId：

<Route exact path="/books/edit" component={BookEdit} />

1个回答

我建议在您的BookEdit组件中进行条件渲染（特别是如果您需要执行异步操作来确定授权）。

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

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

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

示例（使用异步检查，在这里可能不是您的情况，但这是一个普遍的想法）：

class EditComponent extends React.Component {
    state = {
        loading: true,
        error: null,
        bookProps: null,
    };

    componentDidMount() {
        const { match, userId } = this.props;
        getBook(match.params.bookId) // request book props
            .then(book => {
                if (book.ownerId !== userId) { // authorization check
                    this.setState({ error: 'Unauthorized', loading: false });
                } else {
                    this.setState({ bookProps: book, loading: false });
                }
            })
            .catch(err => {
                this.setState({ error: err.message, loading: false });
            });
    }

    render() {
        const { loading, error, bookProps } = this.state;
        if (loading) {
            return <LoadingSpinner />;
        }
        if (error) {
            return <ErrorComponent message={error} />;
        }
        return <BookEditComponent book={bookProps} />;
    }
}
其它你可能感兴趣的问题
上一篇Typescript addEventListener to keydown 给出错误 下一篇react-querybuilder 的额外添加规则按钮