javascript - 如何确保 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

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