Angular 2 Войти в бэкэнд Django Rest Framework

Question

Я использую Angular 2 в качестве внешнего интерфейса и Django Rest Framework на сервере для создания веб-приложения.

Я установил базовое приложение Angular 2, которое извлекает данные из моего бэкэнда Django Rest Framework. Бэкэнд Django Rest Framework имеет URL-адрес "api-auth", настроенный для входа в систему с помощью API с возможностью просмотра (см. Здесь, что я имею в виду), но теперь у меня возникают проблемы при попытке войти из моего приложения Angular 2.

Из того, что я могу сказать, лучше всего использовать JSON Web Tokens (JWT).

Я просмотрел почти все легкодоступные учебные пособия / посты в Интернете, но, похоже, не могу найти четкого ответа, который подводит итог тому, что мне нужно делать на бэкэнде (Django) и frontent (Angular 2). Кто-нибудь в состоянии объяснить на высоком уровне, как войти в бэкэнд Django Rest Framework из интерфейса Angular 2?

Я специально думаю о функции "login", которая будет размещена в файле ".service.ts" в приложении Angular 2, который будет отправлять запрос на публикацию некоторого URL ".../login". Смотрите функцию login() в этом блоге, чтобы понять, что я имею в виду. Я использовал этот пример, но он не дает мне полной картины того, как создать связь между внешним интерфейсом и внутренним интерфейсом.

Answer 1

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

Этот пакет(django-rest-framework-jwt) позволяет вам иметь конечные точки авторизации для управления JWT в Django Rest Framework. У вас не будет проблем, если вы будете следовать документам.

На стороне Angular2 у вас должна быть служба входа в систему, которая будет запрашивать JWT с сервера, используя учетные данные для входа. Это зависит от вашей пользовательской модели в Django.

Этот пост очень полезен для аутентификации Angular2 JWT. Вы можете проверить функцию входа в систему в службе authentication.service. Я немного изменил код, чтобы лучше подходить к DRF-jwt.

let headers = new Headers({
  'Accept': 'application/json',
  'Content-Type': 'application/json',
});
let options = new RequestOptions({
  headers: headers
});
this.http.post(basePath + '/api-token-auth/', JSON.stringify({ username: username, password: password }), options)
.map((response: Response) => {
      // login successful if there's a jwt token in the response
      let token = response.json() && response.json().token;

      if (token) {
        // set token property
        this.token = token;

        // store username and jwt token in local storage to keep user logged in between page refreshes
        localStorage.setItem('id_token', token);

        // return true to indicate successful login
        return true;
      } else {
        // return false to indicate failed login
        return false;
      }
    });
// 'api-token-auth/' is the default endpoint with drf-jwt

Это запрашивает jwt от drf и сохраняет его в localStorage.

С этого момента все ваши http-запросы, требующие аутентификации, должны включать заголовок авторизации. Существует http-оболочка, которая позволяет вам сделать это.

Вы можете переопределить настройки конфигурации по умолчанию. Минимальная конфигурация, которую вы должны переопределить, это то, что вы должны установить это globalHeaders. Вам не нужно менять tokenName или tokenGetter. Просто добавь Content-Type: application/json а также Accept: application/json, (DRF проверит Accept заголовок, чтобы решить, какой тип Renderer он должен использовать.) Вы также можете изменить headerPrefix на JWT потому что drf-jwt использует этот префикс для заголовка авторизации или вы можете изменить его в настройках drf-jwt.