首页 > 解决方案 > 如何确保 React 组件的状态正确?

问题描述

我正在使用 Electron 和 React 构建一个桌面应用程序,并且想知道验证组件状态的最佳方法,或者是否有更好的方法。

设想

假设您有一个基于订阅的应用程序,它将根据用户的订阅状态显示内容。新用户看到的第一件事是登录框。成功登录后,应用程序将从数据库中获取用户的订阅状态。如果用户订阅,他们将看到优质内容。如果他们没有订阅,他们将看到免费内容。

组件外观的简单示例如下:

Interface.js

class Interface extends React.Component {
    constructor() {
        super();

        this.state = {
            signedIn: false,
            hasSubscription: false
            // ...
        }
    }

    // ...

    handleSignIn = (username, password) => {
        // ...

        this.setState({
            // signedIn: true | false
            // hasSubscription: true | false
        });
    };

    render() {
        const display = (this.state.signedIn) ? 
            <Content subscribed={this.state.hasSubscription}/> : <SignIn handleSignIn={this.handleSignIn}/>;

        return (
            {display}
        );
    }
}

SignIn.js

class SignIn extends React.Component {
    handleSubmit = (username, password) => {
        this.props.handleSignIn(username, password);
    };

    render() {
        return (
            // ...
        );
    }
}

Content.js

class Content extends React.Component {
    // ...
}

问题

这样做的问题是,用户可能会通过更改组件中的状态来获取仅限订阅的hasSubscription内容Interface

问题

如何解决这个问题,使Interface组件的状态准确?

标签: javascriptreactjssecurityelectron

解决方案


从安全的角度来看,一般来说,你永远不应该相信浏览器端的 JavaScript 会告诉你真相,除非服务器可以验证它(正是因为你发现的原因——它很容易被篡改)。因此,您的服务器不应向客户端返回任何服务器本身无法验证用户是否有权访问的数据。你如何做到这一点取决于你的技术堆栈中的很多东西。听起来您已经在进行身份验证并将用户权限级别存储在数据库中,因此您应该让服务器在将数据返回到客户端应用程序时执行适当的检查。


推荐阅读