Необходимо сохранить токен доступа, отправленный из бэкэнда (json) в локальное хранилище, и войти в систему, используя этот токен. Как? - PullRequest
Новая
       14

Необходимо сохранить токен доступа, отправленный из бэкэнда (json) в локальное хранилище, и войти в систему, используя этот токен. Как?

0 голосов
/ 24 мая 2019

Я пытаюсь осуществить вход в систему (обычный Javascript).Я получаю токен от бэкэнда.Мне нужно войти в систему с помощью этого токена и сохранить его в LocalStorage.Пожалуйста, помогите мне в этом.

Я правильно сделал вызов API.Но я получаю ошибку 502 (Bad Gateway).Я думаю, причина в том, что я не устанавливаю токен. 

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;
}

Это вызов API, который я делаю, и в качестве ответа я получаю токен.

Ответ упомянут ниже.

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

Я ожидаю успешного входа в систему после ввода адреса электронной почты и пароля - Использование отправки токена с сервера.

1 Ответ

0 голосов
/ 24 мая 2019

Поэтому, как только вы получите токен из запроса на вход в систему, вам необходимо сохранить свой токен. Похоже, вы на правильном пути, думая о localStorage. Кроме того, я бы порекомендовал пойти дальше и использовать синтаксис async / await, так как его гораздо проще читать / использовать. Это требует от вас использовать обещания, но это гораздо более читабельно. И вместо того, чтобы разрешать / отклонять функции, вы просто заключаете код в блоки try / catch. Поэтому, чтобы сохранить свой токен в localStorage после входа в систему, сделайте что-то вроде этого: 

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)
  }
}

Затем, когда вы захотите использовать свой токен в будущих запросах, вы извлекаете его из localStorage. Например: 

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) {}
}

Несколько вещей, на которые стоит обратить внимание:

  1. Убедитесь, что вы знаете, как ваш API ожидает, что токены будут объединены в запросы. В приведенном выше примере я вставляю его в раздел x-access-token заголовка запроса. Однако многие люди используют файлы cookie и т. Д. Убедитесь, что вы передаете их там, где они ожидаются.
  2. Перед выполнением запроса часто принято проверять, действителен ли токен или срок его действия истек. Таким образом, возможно, имеет смысл также хранить весь ваш ответ на вход в систему, который включает в себя информацию об истечении срока действия и время окончания. Затем вы можете выполнить проверку перед выполнением вызова ajax и просто выйти из системы, если токен недействителен. Когда вы сделаете это, обязательно удалите токен и из localStorage.
...