在 localStorage 中添加令牌答案

【问题标题】：Add token inside localStorage在 localStorage 中添加令牌
【发布时间】：2023-02-25 22:02:24
【问题描述】：

我需要在用户授权时将令牌存储在本地存储中，但在提交 <Formik/> 表单后它不会发生。

我认为问题出现是因为该属性不存在。但是 console.log(Boolean(data.payload,token)) 显示为 true。 Token 存在但无法将其存储在 localStorage 中。

const formikSubmit = async (values) => {
        const data = await dispatch(fetchAuth(values))
        if ("token" in data.payload) {
            localStorage.setItem("token", data.payload.token)
        } else {
            alert("failed to login")
        }
    }

【问题讨论】：

token 是字符串吗？您是否在控制台中看到任何错误消息？你怎么知道你无法将它存储在 localStorage 中。请提供更多调试细节。
@Yogi 是的，typeof data.payload.token 返回字符串
@Yogi 因为即使点击后 localstorage 也是空的。 JSON.parse 和 JSON.stringify 都解决不了

标签： javascript reactjs redux local-storage formik

【解决方案1】：

尝试这个

const formikSubmit = async (values) => {
    const data = await dispatch(fetchAuth(values))
    if ("token" in data.payload) {
        window.localStorage.setItem("token", data.payload.token)
    } else {
        alert("failed to login")
    }
}

【讨论】：

你的意思是之前添加窗口？我尝试这样做但没有任何反应
你确定你的 redux 减速器工作正常吗？ .您能否在提交表单后提供数据对象
是的，他们对 registrationForm 和 AuthForm 工作正常。
数据(pin):null => {用户:{_id:'63fa04a24a571d68f8…7PiT-Jj0'} status(pin):'loading' => 'loaded'
此对象不包含名为 token 的密钥！

【解决方案2】：

问题可能与您提供的代码无关，而与表单提交的处理方式有关。以下是您可以尝试帮助调试问题的一些方法：

检查执行顺序：确保表单提交确实发生在授权过程之后。您可以使用 console.log() 将消息输出到控制台以检查执行顺序。
检查是否有错误：确保控制台没有错误。错误可能导致代码在到达 localStorage.setItem() 方法之前停止执行。
检查 localStorage 是否可用：某些浏览器可能不支持 localStorage 或可能将其禁用。您可以使用以下代码检查 localStorage 是否可用：
```
if (typeof(Storage) !== "undefined") {
  // localStorage is available
} else {
  // localStorage is not available
}
```
4.检查token值是否设置正确：可以在localStorage.setItem()方法前添加console.log()语句，检查token值是否设置正确。
```
if ("token" in data.payload) {
    console.log("Token:", data.payload.token);
    localStorage.setItem("token", data.payload.token);
} else {
    alert("failed to login")
}
```

【讨论】：

Token: eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJfaWQiOiI2M2ZhMDRhMjRhNTcxZDY4ZjhiMWJkNmMiLCJpYXQiOjE2NzczMzQwNjksImV4cCI6MTY3NzQyMDQ2OX0.lRKUvqOIhXYXqWtdXXXc4qNgqCnshxz9hUKE2CdAsOk after console.log("Token:", data.payload.token);
本地存储可用