使用React.js存储在fetch（）上生成的令牌

Question

From this code I get a token, I need to store the token to use in another fetch so I can refresh the token, what's the best way to do it?

I can only access the variable inside the function .then ...

I would prefer to store the token in a encoded cookie, but I don't how to handle cookies em react, or how to encode or decode them.

componentDidMount() {
  fetch("theURL/api-token-auth/", {
    method: "POST",
    headers: {
      Accept: "application/json",
      "Content-Type": "application/json"
    },
    body: JSON.stringify({
      email: "EMAIL",
      password: "PASS"
    })
  })
    .then(res => {
      if (res.ok) {
        return res.json();
      } else {
        throw Error(res.statusText);
      }
    })
    .then(json => {
      this.setState({
        isLoaded: true,
        token: json
      });

      let token = this.state.token;
      console.log("var token: ", token);
    })
    .catch(error => console.error(error));
}

Answer 1

Take a look on localStorage, is a good place for store tokens.

localStorage.setItem('token', 'userToken');

And then to recover the value just do: const token = localStorage.getItem('token');

Take a deeper look here: Web Storage