javascript - 从本地存储中删除项目后出现未处理的拒绝错误。刷新修复

Question

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

每次注销只会执行一次。如果你刷新页面，它加载得很好，但显然没有人希望他们的网站出现这样的错误。

token是这样登录后存储的:

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); 是存储 token 的地方。我使用 localStorage.removeItem("access_token") 删除了 token 我也尝试过使用 localStorage.clear() 但返回登录屏幕时它会给出相同的错误。当按下注销按钮时，我所做的只是删除 token 并重定向到登录屏幕，这并不复杂。

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

错误发生在根页面解析本地存储以检查 token 时。这是错误消息的来源:

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

Answer 1

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

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