Vue : заголовок авторизации JWT с Axios

Vue : заголовок авторизации JWT с Axios

20.09.2019 05:33:45 Просмотров 28 Источник

Я создал переднее приложение на vue.мы с Джей-Си используем Феникс в качестве бэкенда. Я пытаюсь сделать запрос и возвращаю ошибку : Получить http://localhost:4000/api/v1/my_user 401 (несанкционированный)

это лучше, чем иметь проблемы с Корсом.

В моей части сценария я создаю свой заголовок для управления контролем доступа и передачи авторизации. В конце я вызываю свой URL и передаю переменные.

getCurrentUser: function() {
  let axiosConfig = {
    headers: {
      "Content-Type": "application/json;charset=UTF-8",
      "Access-Control-Allow-Origin": "*",
      "Authorization": "Bearer " + localStorage.getItem("jwt")
    }
  };

  // call rest API
  axios
    .get("http://localhost:4000/api/v1/my_user", {}, axiosConfig)
    .then(res => {
      console.log("RESPONSE RECEIVED: ", res);
      //const jwt = res.data.jwt;
      //this.showComponent = false;
      console.log("res:" + res);
      //localStorage.setItem("jwt", jwt); // store the token in localstorage
    })
    .catch(err => {
      console.log("AXIOS ERROR: ", err);
    });
},

местный склад.getItem ("jwt") возвращает правильный токен. Моя проблема заключается в том, что я не встречаю ошибки при использовании клиента postman и когда я передаю в качестве значения авторизации те же значения, что и в заголовке / Authorization

У вопроса есть решение - Посмотреть?

https://stackoverflow.com/questions/58030415/vue-jwt-authorization-header-with-axios#comment102468888_58030415
Это может быть одна из многих вещей. Какие заголовки вы получаете в своем бэкэнде? Вам нужно настроить его для удаления текста носителя, вы пытаетесь разобрать строчный носитель и проходящий носитель. Является ли токен действительным, имеет ли он правильный авторитет и т. д.
https://stackoverflow.com/questions/58030415/vue-jwt-authorization-header-with-axios#comment102485001_58030415
Технически я получаю json, содержащий значение токена. Этот маркер хранится в localStorage. Я пробовал с "несущей" частью и без нее, я также разбирал ее, но ошибка остается той же самой. Я попытался отправить жетон обратно с почтальоном, и это сработало. Интересно, положил ли я разрешение туда, где оно должно быть? Я попытался поместить маркер в качестве второго параметра между {}

Ответы - Vue : заголовок авторизации JWT с Axios / Vue : JWT Authorization header with Axios

Является ответом!
davidvera

25.09.2019 03:36:32

Я заменил этот код на :

getCurrentUser: function() {
    axios.defaults.headers.common["Authorization"] =
                "Bearer " + localStorage.getItem("jwt");

   // call rest API
    axios
        .get("http://localhost:4000/api/v1/my_user")
        .then(res => {
         console.log("RESPONSE RECEIVED: ", res);
    })
    .catch(err => {
        console.log("AXIOS ERROR: ", err);
    });
},
Закрыть X