需要将从后端（json）发送的Access令牌存储到localstorage并使用该令牌登录。 怎么样？

Question

I am trying implement a login (Plain Javascript). I am getting a Token from backend. I need to make the login using that token and storing it in LocalStorage. Please help me on this.

I have done the API call correctly. But I am getting a 502 (Bad Gateway) error. I think the reason is I am not setting the token.

function postData() {
    var res = fetch('https://example.api.com/login', {
        method: "POST", // POST
        mode: "cors",
        cache: "no-cache",

        headers: {
            'Content-Type': 'application/json; charset=utf-8',
            'Access-Control-Allow-Origin': '*',
            'Accept': 'application/json'    
        },

        redirect: "follow",
        referrer: "no-referrer",


        body: JSON.stringify({
            isArray: false,
            data: {
                    email: document.getElementById("email").value,
                    password: document.getElementById("passwordNew").value
                }
        })

    }).then(response => response.json()); // parses response to JSON
    console.log("result :" + res);
    return res;
}

This is the API call I make and as the response I get the token.

Response is mentioned below.

"data": {
    "token": "sdfsdgsfgsgsgssb497e7764f4df8cb504a122cc18b2eed8",
    "startTime": 1558417495078,
    "endTime": 1558503895078
}

I expect to successfully login after entering email and password - Using the token sending from the backend.

Answer 1

So once you receive the token back from your login request, you need to store your token. Looks like you are on the right track, thinking about localStorage. Also, I'd recommend going ahead and using the async/await syntax as its much easier to read / use. It requires you to leverage promises, but it much more readable. And rather than resolve / reject functions, you just wrap your code in try/catch blocks. So to store your token in localStorage after login, do something like this:

async function handleLogin(un, pw) {
  try {
    let response = await fetch('https://example.api.com/login', {
        method: "POST", // POST
        mode: "cors",
        cache: "no-cache",
        headers: {
            'Content-Type': 'application/json; charset=utf-8',
            'Access-Control-Allow-Origin': '*',
            'Accept': 'application/json'    
        },
        redirect: "follow",
        referrer: "no-referrer",
        body: JSON.stringify({
            isArray: false,
            data: {
                    email: document.getElementById("email").value,
                    password: document.getElementById("passwordNew").value
                }
        })
    })
    response = response.json();
    window.localStorage.setItem('token', response.data.token)
  } catch(e) {
    console.log('error while logging in', e)
  }
}

Then when you want to use your token in future requests, you grab it from localStorage. For example:

async function editProfile(updatedProfileInfo) {
  const token = localStorage.getItem('token');
  try{
    let response = await fetch('https://someurl.com/edit', {
      method: "POST",
      ...
      'x-access-token': token,
      ...
    })
  //handle response
  } catch(e) {}
}

A few things to take note of:

1. Make sure you know how your API expects tokens to be bundled in requests. In the example above, I stick it in the x-access-token section of the request header. However, many people use cookies, etc. Make sure you are passing it where it is expected.
2. Before making the request, it is often customary to check if the token is still valid or if it has expired. As such, maybe it makes sense to also store your entire login response, which includes expiration info and endtime. Then you can do the check before making the ajax call, and just log the user out if the token is invalid. When you do this, be sure to remove the token from localStorage as well.