Угловая 2 Вход в Django Rest Framework Backend

Question

Я использую Angular 2 в качестве моего front-end и Django Rest Framework на сервере для создания webapp.

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

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

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

Я специально задумываюсь о функции «входа», которая будет сидеть в файле «.service.ts» в приложении «Угловое 2», которое сделает запрос на отправку некоторого URL-адреса «.../login». См. Функцию login() в this blog, чтобы понять, что я имею в виду. Я ушел с этого примера, но это не дает мне полную картину того, как создать соединение между интерфейсом &.

Answer 1

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

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

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

This blog post очень полезен при использовании функции Angular2 JWT Authentication. Вы можете проверить функцию входа в службу 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 wrapper, который позволяет вам это делать.

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