Question

我用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>
    )
}

}

我无法更改数据库。角色数据始终为“管理员” 或“学生” 。

Answer 1

如果您的后端对每项经过身份验证的操作都进行了检查，那应该没问题。

我认为你做错了

我认为您将经过身份验证的信息发送到前台，让其处理是否应该显示它们。这真的很糟糕。即使未在DOM中呈现，也可以读取请求中发送的每个信息。 php后端应根据数据库角色过滤信息。

解决方案

仅在XHR请求中保留令牌或对您的前端用户进行身份验证的内容。 JWT是实现它的绝佳方法，因为它不能从前端进行更改。处理是否呈现管理操作，但继续在每个后端请求中进行检查。如果信息被恶意用户更改，它将被后端踢走，并且您不必担心前端是否被破坏。

走得更远

将标记和信息保留在全局上下文中也可能很有趣。例如，您可以使用React.Context或Redux并将其与本地存储同步。因此，您无需使用用户数据来遍历道具。

用户登录后如何在React中保存用户信息

1 个答案:

我认为你做错了

解决方案

走得更远