我用React编写了一个小型应用程序,后端是PHP。我在数据库中有2类用户(管理员和学生)。用户登录后,我将信息保存在会话存储中(用户:{用户名:'abcxyz123',角色:'admin'})。组件基于渲染的user.role。这个工作不错。但是,如果我打开DevTools并更改user.role,我的应用将渲染错误(因为user.role是非常简单的文本)。我如何避免这种情况?我的代码就是这样。
class MyApp extends Component {
constructor(props) {
super(props);
this.state = {
user: (window.sessionStorage.user)
? JSON.parse(window.sessionStorage.user)
: false,
};
}
checkUserToLogin = (e) => {
if( loginSuccess ){
// return data of user in variable finalData
// finalData = { username:'abcxyz123', role: 'admin' }
window.sessionStorage.setItem('user', JSON.stringify(finalData));
this.setState({ user: JSON.parse(window.sessionStorage.user) });
}
}
render() {
const {
user
} = this.state;
return (
<div>
<form onSubmit={ this.checkUserToLogin }>
<input type="text" />
<input type="password" />
<button type="submit"> Login </button>
</form>
{/*Component will render based props user.role */}
<Component user={user} />
</div>
)
}
}
我无法更改数据库。角色数据始终为“管理员” 或“学生” 。
答案 0 :(得分:-1)
如果您的后端对每项经过身份验证的操作都进行了检查,那应该没问题。
我认为您将经过身份验证的信息发送到前台,让其处理是否应该显示它们。这真的很糟糕。即使未在DOM中呈现,也可以读取请求中发送的每个信息。 php后端应根据数据库角色过滤信息。
仅在XHR请求中保留令牌或对您的前端用户进行身份验证的内容。 JWT是实现它的绝佳方法,因为它不能从前端进行更改。 处理是否呈现管理操作,但继续在每个后端请求中进行检查。 如果信息被恶意用户更改,它将被后端踢走,并且您不必担心前端是否被破坏。
将标记和信息保留在全局上下文中也可能很有趣。例如,您可以使用React.Context或Redux并将其与本地存储同步。 因此,您无需使用用户数据来遍历道具。