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 {
    // ...
}

问题

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

问题

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

Answer 1

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

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

1 个答案: