javascript - 如何确保 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
组件的状态准确?
解决方案
从安全的角度来看,一般来说,你永远不应该相信浏览器端的 JavaScript 会告诉你真相,除非服务器可以验证它(正是因为你发现的原因——它很容易被篡改)。因此,您的服务器不应向客户端返回任何服务器本身无法验证用户是否有权访问的数据。你如何做到这一点取决于你的技术堆栈中的很多东西。听起来您已经在进行身份验证并将用户权限级别存储在数据库中,因此您应该让服务器在将数据返回到客户端应用程序时执行适当的检查。
推荐阅读
- r - 使用 grep 或 dplyr 有条件地删除行并替换其他行?
- javascript - 下拉列表未列出从 React js 中的 https://disease.sh/ 导入的国家/地区
- python - 遍历 URL 时如何解决动态 DOM 问题?
- git - 在 Prezto ZSH 中为 git 函数自定义完成
- java - Observable 没有返回打印出来的值
- anaconda - wget 在可访问的文件上给出 403
- tomcat - 如何使 Tomcat 7 提示输入客户端证书
- javascript - SAP UI5中数据的绑定
- laravel - 如何将变量保存为集合
- python - 提高位置命名实体的空间实体准确性