Используйте токен доступа с Reactjs Frontend

Question

Я сделал API аутентификации с Nodejs, Expressjs, MongoDB и JWT. Теперь я делаю небольшой интерфейс с React- js, который выполняет только регистрацию и вход. Я интегрировал регистрацию, и теперь, когда я пытаюсь интегрировать вход с интерфейсом, я получаю токен доступа, когда попадаю в конечную точку входа. Я не знаю, как использовать токен доступа для аутентификации пользователя. Может ли кто-нибудь помочь мне с этим?

{
    "id": "5f2bc55f5ea2f61fd8b26fcf",
    "username": "wango",
    "email": "wango@gmail.com",
    "roles": [
        "user",
        "admin"
    ],
    "accessToken": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjVmMmJjNTVmNWVhMmY2MWZkOGIyNmZjZiIsImlhdCI6MTU5Njc4ODgxOSwiZXhwIjoxNTk2ODc1MjE5fQ.NkGUSgQ237ifRSrPxtJCSG9W463SFy_VDGlfapNwr1U"
}

Я прикрепил фрагмент кода ответа, который я получаю, когда попадаю в конечную точку с именем пользователя и паролем.

Answer 1

Адриан Соларчик сказал все. Итак, я использую localStorage в качестве примера, поэтому после входа в систему вы устанавливаете токен в локальное хранилище, как это.

 localStorage.setItem("accessToken", response.accessToken);

Если вы используете выборку перед отправкой запроса, предполагая, что вы передаете его как заголовок . Вам нужно будет сохранить токен в локальном хранилище. Итак, что-то вроде этого.

 const accessToken = localStorage.getItem("accessToken");

Теперь у вас есть токен, который вы можете прикрепить, предполагая, что вы передаете его в качестве заголовка для каждого запроса.

const myHeaders = new Headers();
myHeaders.append('Content-Type', 'application/json');
myHeaders.append('Authorization', `Bearer ${accessToken}`);
fetch('url', {
method: 'whatevermethod',
headers: myHeaders,
})

Вы можете использовать Ax ios, если вы предпочитаете, но я надеюсь, что это даст вам представление о том, как go об этом. Поэтому всякий раз, когда пользователь выходит из системы, вам необходимо убедиться, что вы удалили токен из локального хранилища.

 localStorage.removeItem("accessToken");

Answer 2

Вам нужно как-то локально хранить ваш токен доступа на стороне клиента (cook ie, localStorage, indexedDb). Вам также понадобится токен refre sh для сохранения непрерывного сеанса. Я лично рекомендую хранить JWT в http-only и secure cook ie. Затем вы должны прикрепить свой токен доступа к запросу на каждой защищенной конечной точке как заголовок

Authorization: Bearer {token}

(или к каждому запросу в зависимости от конфигурации вашего внутреннего интерфейса).