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

Question

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

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

记录用户（数据）显示正确的对象。但是，使用 setUser(data) 然后稍后尝试在我的 return 中检索它给了我 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>
    )
}

Answer 1

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

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

并将其解析回您的对象：

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

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

Undefined object when trying to retreive state object from oidc-client callback

reactjs

openid-connect

react-hooks