如何确保React组件的状态正确？

Question

我正在用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 {
    // ...
}

问题

问题是用户可以通过更改Interface组件中hasSubscription的状态来获取仅订阅的内容。

题

如何解决此问题，以便Interface组件的状态正确？

Answer 1

从安全性的角度来看，通常，除非服务器可以验证（出于发现的原因，很容易对其进行篡改），否则永远不要相信浏览器端的JavaScript告诉您真相。 因此，您的服务器不应将任何数据返回给客户端，而服务器本身无法验证用户是否有权访问该客户端。 如何实现这一目标取决于技术堆栈中的许多事情。 听起来您已经在进行身份验证并将用户权限级别存储在数据库中，因此，只要服务器将数据返回到客户端应用程序，就应该让服务器执行相应的检查。