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

Posted 2021-03-27

我用React编写了一个小应用程序，后端是php。我在数据库（管理员和学生）中有2个类型的用户。用户登录后，我将信息保存在会话存储中（用户名：{username：'abcxyz123'，role：'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>
    )
}

}

我无法更改我的数据库。角色数据总是“管理员”或“学生”。

答案

如果在后端对每个经过身份验证的操作进行检查，那么这应该不是问题。

我认为你做错了什么

我认为你将经过验证的信息发送到前面，如果它们应该被显示，就让它处理。这真的很糟糕。即使它没有在DOM中呈现，也可以读取请求中发送的每个信息。 php后端应根据数据库角色过滤信息。

解决方案

只保留一个令牌或在XHR请求中对您的前端用户进行身份验证的内容。 JWT是一个非常好的方法，因为它不能从前面变异。处理或不处理管理员操作，但继续在每个后端请求中检查它。如果恶意用户更改了这些信息，那么它将从后端启动，而您并不关心前端是否已损坏。

走得更远

将此令牌和信息保存在全局上下文中也很有趣。例如，您可以使用React.Context或Redux并将其与本地存储同步。因此，您不需要使用您的用户数据来浏览道具。