Как добавить jsonwebtoken (JWT) в заголовок запроса?

Question

У меня есть простое многостраничное приложение, написанное на vanilla JS, Pug и Node, которое использует вход в систему с помощью JWT. Когда пользователь входит в систему, клиенту возвращается JWT. JWT хранится в localStorage. Вот мой ajax-запрос на стороне клиента, когда пользователь входит в систему и возвращает токен:

$.ajax({
    url: "/login",
    type: "POST",
    data: { arr },
    success: (res) => {
      if (res.status == 200) {
        localStorage.setItem("token", res.token);
        console.log("success");
      }
    },
    error: (err) => { console.log(err) }
  });

выше работает отлично.

Каждая страница на сайте имеет несколько различных ссылок или кнопок: /home, /profile, /about и т. Д. Некоторые маршруты защищены (только для зарегистрированных пользователей), поэтому я ' м, используя JWT в первую очередь. Я видел на уроках YouTube, что JWT должен храниться в localStorage и отправляться в запросах в шапке. Я полагаю, что у меня уже есть серверное промежуточное ПО, которое успешно проверит наличие в заголовке действительного JWT. У меня такой вопрос: Как добавить JWT в заголовок запроса, когда пользователь нажимает ссылку на моей странице, , чтобы я мог выполнить проверку на стороне сервера? Возможно ли это, если я использую vanilla JS или мне нужно другое решение?

Вот типичная страница для моего сайта (написано на Pug).

body
    h1 History of changes
    div View previous changes
    br
    each val, ind in histArr
      div.history
        a(href="/diff/" + val.numb)
          button See changes
        span= " " + val.date + " " + val.author + " " + val.message
      br

    a(href="/history")
      button /history
    a(href="/")
      button home
    a(href="/profile")
      button profile

Как добавить JWT в заголовок, когда пользователь нажимает эти кнопки?

EDIT

Например: пользователь находится на домашней странице моего сайта. Они нажимают на ссылку, которая является защищенным маршрутом. Я хочу проверить, вошли ли они (то есть, имеют JWT) перед рендерингом страницы. Как мне добавить JWT в заголовок запроса, чтобы проверить это? В частности, является ли использование вызова ajax единственным способом добавления моего JWT в заголовок запроса или есть другой способ?

Answer 1

Вы можете установить заголовки так:

$.ajax({
  url: 'ajax_url',
  ...
  headers: {
    'Authorization': 'Bearer ' + 'your_token'
  }
})

Answer 2

Передать заголовок из Ajax таким образом ...

$.ajax({
 type: "POST",
 beforeSend: function(request) {
   request.setRequestHeader("token", {{{token}}); // Set dynamic token 
 },
 url: "/login",
 ... 
});

Другой способ:

$.ajax({
  url: 'YourRestEndPoint',
  headers: {
    'Authorization': {{token}},
    'Content-Type':'application/json'
  },
  method: 'POST',
  dataType: 'json',
  data: YourData,
  success: function(data){
    console.log('succes: '+data);
  }
});

Просмотреть ссылку

обновление

Пожалуйста, проверьте эту ссылку , чтобы передать заголовок в vanilla js.

var httpHandler = function (err, str, contentType) {
  if (err) {
    res.writeHead(500, {'Content-Type': 'text/plain'});
    res.end('An error has occured: ' + err.message);
  } else {
    res.writeHead(200, {'Content-Type': contentType});
    res.end(str);
  }
};

Теперь вы можете попытаться установить около writeHear.