尝试从 oidc-client 回调中检索状态对象时未定义的对象答案

【问题标题】：Undefined object when trying to retreive state object from oidc-client callback尝试从 oidc-client 回调中检索状态对象时未定义的对象
【发布时间】：2020-03-16 01:19:06
【问题描述】：

验证用户身份并重定向回我的Home 组件后，我正尝试从signinRedirectCallback函数中检索用户配置文件，如下所示：

usermanager.signinRedirectCallback().then(function (data) {
        console.log(data)
        setUser(data)
    }).catch(function (e) {
        console.error(e)
    });

记录用户（数据）显示正确的对象。但是，使用setUser(data)，然后在我返回时尝试检索它会给我read property of undefined。

函数代码如下：

function Home() {
    const usermanager = new Oidc.UserManager(authConfig)
    const [user, setUser] = useState(localStorage.getItem("user") || {})

    React.useEffect(() => {
        localStorage.setItem("user", user);
    }, [user])

    usermanager.signinRedirectCallback().then(function (data) {
        console.log(data)
        setUser(data)
    }).catch(function (e) {
        console.error(e)
    });

    return (
        <div>
            <h3>Home component</h3>
            <p>{user.profile.unique_name}</p>
            {console.log(user)}
        </div>
    )
}

我想要的是能够将用户存储在以后能够在应用程序中使用的状态。

这是完成的工作代码：

function Home() {
    const usermanager = new Oidc.UserManager(authConfig)
    const [user, setUser] = useState(JSON.parse(localStorage.getItem("user")) || {})

    React.useEffect(() => {
        localStorage.setItem("user", JSON.stringify(user));
    }, [user])

    usermanager.signinRedirectCallback().then(function (data) {
        setUser(data)
    }).catch(function (e) {
        console.error(e)
    });

    return (
        <UserContext.Provider value={user.profile}>
            <div>
                <ComponenentThatUsesUserContext />
            </div>
        </UserContext.Provider>
    )
}

【问题讨论】：

为什么页面重新加载后会有数据？这一切都将是默认的。您可以在 cookie、本地存储、重定向链接中存储重定向之间的数据...
@RTW 但是这不是我在我的 useffect 和localstorage 调用中所做的吗？

标签： reactjs react-hooks openid-connect

【解决方案1】：

您需要在存储用户数据之前对其进行字符串化：

 localStorage.setItem("user", JSON.stringify(user));

并将其解析回您的对象：

JSON.parse(localStorage.getItem("user"))

【讨论】：

这解决了这个问题。谢谢！