时间戳

首页 > 解决方案 > 只要用户经过身份验证，就无法将用户数据从后端保存到 redux 状态

javascript - 只要用户经过身份验证，就无法将用户数据从后端保存到 redux 状态

问题描述

我想在他进行身份验证时在主页上显示用户名，所以在后端和登录端点我将一个用户对象放在 json 响应(res.json)中，其中包含将被发送到客户端的用户的名称和电子邮件作为对登录 redux 操作的响应，该操作将从中获取用户对象res.data并将其发送到将用户对象保存到 redux 状态的 reducer。当我登录时一切正常，数据会像我想要的那样显示，但是当我更改任何关于其他任何内容的随机内容并且当我保存时页面刷新时，我收到用户数据不可用的错误

TypeError：无法从 user.name 读取未定义的属性“名称”

因此用户数据不会永久保存在该状态中。

我认为mongodb有问题，但一切都很好，我得到了mapstatetoprops，就像我应该使用proptypes和connect方法一样，但我的组件没有构造函数。

发送数据的后端代码

            if (isMatch) {

                // User matched
                // Create JWT Payload
                const payload = {
                    id: user.id,
                    name: user.first_name + " " + user.last_name
                };

                // Sign token
                jwt.sign(
                    payload,

                    keys.secretOrKey,
                    {
                        expiresIn: 31556926 // 1 year in seconds
                    },
                    (err, token) => {
                        res.json({
                            success: true,
                            token: "Bearer " + token,
                            user: {
                                name: user.first_name + " " + user.last_name,
                                email: user.email
                            }
                        });
                    }
                );
            }

前端 ：

render() {
        const { user } = this.props.auth;
        return (
            <div style={{ height: "75vh" }} className="container valign-wrapper">
                <div className="row">
                    <div className="col s12 center-align">
                        <h4>
                            <b>Hey there,</b> {user.name}
                        </h4>
                    </div>

                </div>
            </div>
        );
    }
}
WelcomeDashboard.propTypes = {
    auth: PropTypes.object.isRequired
};
const mapStateToProps = state => ({
    auth: state.auth
});
export default connect(
    mapStateToProps,
    { logoutUser }
)(WelcomeDashboard);

我希望用户数据始终可用，并且在我进行更改和页面刷新时不会丢失和未定义

TypeError：当页面从“{user.name}”刷新时，无法读取未定义的属性“名称”

但是当我注销并再次登录时，只有当我更改一些代码时才会出现错误

标签： javascriptreactjsredux

解决方案

因为您有完整的 API 实现，所以您无法从后端获得任何帮助。所以这不是 MongoDB 的问题。

在处理您的问题时，我有一些建议可以摆脱这个问题。

  1. 您可以将当前的 redux 状态保存到浏览器本地存储中。下面的代码段显示了如何为您的 authReducer 执行此操作。
import { persistStore, persistReducer } from 'redux-persist'
import storage from 'redux-persist/lib/storage'

// your authReducer here

const authPersistConfig = {
    key: 'auth',
    storage: storage,
};

export default persistReducer(authPersistConfig, authReducer);
  1. 在身份验证后显示的主要组件（如仪表板或导航栏或主应用程序）中，您可以触发另一个 API 调用来验证您当前的 JWT 令牌并返回用户详细信息，就像您在登录请求中所做的那样。（JWT 令牌应该保存在本地存储中）

这些是几个选项，您可以选择一个您非常熟悉的选项。希望这会帮助你。

推荐阅读