Angular4 / Ionic3 как сериализатор данных

Я работаю в приложении с ionic 3 / Angular 4, и у меня проблема с функцией входа в систему. Я хочу изменить формат json с этого:

> this.data = {
>               grant_type: "password",
>               username: this.loginData.username,
>               password: this.loginData.password,
>               client_id: "client"
>               };

к чему-то вроде этого

?grant_type=password&client_id=client&client_secret=secret&username=admin&password=123456

поэтому я могу использовать его для аутентификации токена следующим образом:

http://localhost:8080/api/oauth/token?grant_type=password&client_id=client&client_secret=secret&username=admin&password=123456

Я использовал его в ionic 1 / angularJS вот так

data: $httpParamSerializer($scope.data);

но я не знаю эквивалента в angular 4.

Заранее спасибо :)

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
0
0
666
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вам нужно будет использовать URLSearchParams

Базовый пример

let params = new URLSearchParams();
params.set('search', term); // the user's search value

Установить параметры поиска

Ваш сервис

import { Headers, RequestOptions, Http, Response, URLSearchParams } from '@angular/http';


// User is done editing, serialize and POST to web service
tokenAuthenticate(): void {
    let headers = new Headers({ 'Content-Type': 'application/x-www-form-urlencoded' });
    let options = new RequestOptions({ headers: headers });

    // Dynamically serialize the entire object
    // *** THIS IS THE SERIALIZATION ***
    let params: URLSearchParams = this.serialize(this.selectedItem);


    this._http.post('http://localhost:8080/api/oauth/token', params, options)
      .map(this.extractData)
      .catch(this.handleError);

}

/**
 * Serializes the form element so it can be passed to the back end through the url.
 * The objects properties are the keys and the objects values are the values.
 * ex: { "a":1, "b":2, "c":3 } would look like ?a=1&b=2&c=3
 * @param obj - Object to be url encoded
 * @returns URLSearchParams - The url encoded system setup
 */
serialize(obj: any): URLSearchParams {
    let params: URLSearchParams = new URLSearchParams();

    for (var key in obj) {
        if (obj.hasOwnProperty(key)) {
            var element = obj[key];

            params.set(key, element);
        }
    }
    return params;
}

для функции <serialize (obj: SystemSetup)>: SystemSetup не знает, что я должен изменить? или мне нужно что-то импортировать ??

Ragnar Lodbrok 18.04.2018 18:29

Вы можете поменять его на любой

ashfaq.p 18.04.2018 18:30

Окей, спасибо, работает нормально, но у меня появилась новая ошибка: «ошибка»: «Неавторизовано», «сообщение»: «Для доступа к этому ресурсу требуется полная аутентификация»

Ragnar Lodbrok 18.04.2018 18:39

Это не проблема с серверной частью. Это просто проблема синтаксиса функции входа в систему, и теперь она работает нормально. Спасибо за ответ :)

Ragnar Lodbrok 19.04.2018 14:12

Другие вопросы по теме