从本地存储中删除项目后未处理的拒绝错误。刷新修复它答案

【问题标题】：Unhandled rejection error after removing item from localstorage. Refresh fixes it从本地存储中删除项目后未处理的拒绝错误。刷新修复它
【发布时间】：2019-07-17 19:32:57
【问题描述】：

所以我试图在我的站点上放置一个注销按钮，并且我将用户的令牌存储在 localstorage 中，但是当单击注销按钮时，一旦站点重定向回，令牌就会从 localstorage 中删除登录页面，我收到错误Unhandled Rejection (SyntaxError): Unexpected token u in JSON at position 0

每次注销时它只会执行一次。如果您刷新页面，它会正常加载，但显然没有人希望在他们的网站上出现这样的错误。

登录后令牌存储如下：

async userLogin(e) {
    const { email, password } = this.state;
    const target = e.target.value
    try {
      let response = await fetch("<API URL removed for security reasons>", {
        method: "POST",
        headers: {
          Accept: "application/json",
          "Content-Type": "application/json"
        },
        body: JSON.stringify({
          email: email,
          password: password,
          uid: email
        })
      });
      let res = await response.text();
      if (response.status >= 200 && response.status < 300) {
        let accessToken = res;
        console.log(accessToken);
        localStorage.setItem("access_token", accessToken);
        this.setState({
          loginFailed: false,
          isFlipped: true,
        });
      } else {
        let error = res;
        this.setState({
          loginFailed: true
        });
        alert("Invalid login credentials");
        throw error;
      }
    } catch (error) {
      this.setState({
        error: error,
        loginFailed: true
      });
      console.log("error: " + error);

    }
  }

localStorage.setItem("access_token", accessToken); 是存储令牌的位置。我使用localStorage.removeItem("access_token") 删除了令牌我也尝试过使用localStorage.clear()，但是在返回登录屏幕时它给出了同样的错误。当按下注销按钮时，我所做的只是删除令牌并重定向到登录屏幕，这并不复杂。

 const logOut = () => {
    localStorage.clear()
    console.log(localStorage)
    return <Redirect to="/login"/>
  }

当根页面解析本地存储以检查令牌时出现错误。以下是错误信息的来源：

  componentWillMount() {
    const hasToken = JSON.parse(localStorage.access_token)
    if (hasToken.token_info.token !== null) {
      this.setState({
        authenticated: true
      })
    }   
  }

【问题讨论】：

在你解析检查之前确保它不是 undefined 。 if(localStorage.access_token!===undefined){ const hasToken = JSON.parse(localStorage.access_token) }
userLogin 是事件处理程序吗？为什么在客户端设置Accept: "application/json" 标头？ .catch() 是否链接到 userLogin() 函数来处理错误？

标签： javascript reactjs syntax-error local-storage

【解决方案1】：

发生这种情况是因为localStorage.access_token 返回undefined 并用JSON.parse 解析undefined 会引发错误。所以你可以检查为

const hasToken = localStorage.access_token ? JSON.parse(localStorage.access_token) : null

【讨论】：

我之前确实尝试过，但它给了我错误TypeError: Cannot read property 'token_info' of null——但后来我才意识到如果 hasToken 为空，token_info 将不存在，所以我让它检查 @987654327 @ for null 而不是hasToken.token_info.token，它似乎工作！谢谢！
是的，因为hasToken 为空，所以您可以检查为if (hasToken && hasToken.token_info.token !== null) {}
是的，我想我没有注意到它，因为我有点睡眠不足——明天有截止日期！我知道它最终会变得非常简单哈哈