Vue Логин PWA работает в dev, но возвращает 401 в рабочем состоянии - PullRequest
Новая
       4

Vue Логин PWA работает в dev, но возвращает 401 в рабочем состоянии

0 голосов
/ 06 февраля 2020

У меня есть Vue.js PWA с Django Rest Framework бэкэндом, который корректно работает локально на моем ноутбуке (с помощью браузера). Когда я развертываю его в рабочей среде, он продолжает работать правильно, когда я вхожу в систему с помощью браузера, однако не удается войти в систему, когда он открыт как PWA (ie: на телефоне или PWA, сохраненном в браузере).

Вот мой код входа в систему: 

      axios
        .post("/api/get-token/", user)
        .then(res => {
          localStorage.setItem('user-token', res.data.token);
          axios.defaults.headers.common['Authorization'] = res.data.token;
          commit(AUTH_SUCCESS, res.data);
          resolve(res);
        })
        .catch(err => {
          commit(AUTH_ERROR, err);
          reject(err);
        });

Как уже упоминалось, все работает локально и в рабочем режиме при входе через браузер. Проблема возникает при попытке войти в систему с помощью PWA.

При попытке войти в систему PWA я получаю следующее: 

POST https://www.example.com/api/get-token/ 401 (Unauthorized)

Создание консольного журнала об ошибке, полученной от Сервер, который я получаю: 

{
  detail: "Invalid token header. No credentials provided."
  __proto__: Object
  status: 401
  statusText: "Unauthorized"
  headers: {allow: "POST, OPTIONS", connection: "keep-alive", content-length: "59", content-type: "application/json", date: "Thu, 06 Feb 2020 15:00:11 GMT", …}
  config:
    url: "/api/get-token/"
    method: "post"
    data: "{"username":"test@example.com","password":"password"}"
    headers:
      Accept: "application/json, text/plain, */*"
      Authorization: "Token "
      Content-Type: "application/json;charset=utf-8"
   __proto__: Object
  transformRequest: [ƒ]
  transformResponse: [ƒ]
  timeout: 0
  adapter: ƒ (t)
  xsrfCookieName: "csrftoken"
  xsrfHeaderName: "X-CSRFToken"
  maxContentLength: -1
  validateStatus: ƒ (t)
}

На производстве работают следующие функции:

  1. Войдите на сайт с помощью браузера на моем ноутбуке или на телефоне.
  2. Затем откройте PWA. Это работает правильно, и я могу продолжать использовать PWA.

Единственная проблема возникает при попытке войти в систему с помощью PWA.

Ответы [ 2 ]

0 голосов
/ 10 февраля 2020

Я со временем разобрался в проблеме. По какой-то причине в заголовке POST помещалось следующее: Authorization: "Token ".

Это действительно странно, поскольку при входе в систему с использованием /api/get-token/ токен не требуется, поскольку это маршрут входа в систему. Кроме того, он отлично работает из браузера. Единственная проблема - при попытке из PWA.

В любом случае, изменение заголовка, чтобы явно не иметь значения для Authorization, исправило проблему следующим образом: Authorization: ""

0 голосов
/ 06 февраля 2020

Можете ли вы войти в систему на телефоне локально? У меня тоже была эта проблема, проблема была в том, что интерфейс и сервер не работали на одном хосте. Это решило мою проблему: 

devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:5000'
      }
    }
  }
...