Получение параметров запроса из HTTP get / post в сервисе angular 4

Я пытаюсь отправить данные формы, используя следующую HTML-форму: -

<head>
<meta http-equiv = "content-type" content = "text/html; charset=UTF-8">
</head>
<body>

<form action = "https://test-pubg.sohum.com:4200/securelogin" target = "_blank" method = "get">
  Access: <input type = "text" id = "accessToken" name = "accessToken"><br>
  Refresh: <input type = "text" id = "refreshToken" name = "refreshToken"><br>
  <button type = "submit">Submit</button><br>
</form>

теперь каждый раз, когда я нажимаю кнопку отправки, открывается другая вкладка (которая предназначена) с URL-адресом: - https: //test-pubg.sohum.comt: 4200 / securelogin? accessToken = test & refreshToken = test

У меня пустая консоль браузера, и это проблема

Now if i change the URL to the following(note the # added in the URL) and refreah the url by pressing F5 :- https://test-pubg.sohum.com:4200/#/securelogin?accessToken=test&refreshToken=test

Я получаю нужные данные в консоли браузера, а именно: -

Angular is running in the development mode. Call enableProdMode() to enable the production mode.

constructor called test test

Это происходит даже в том случае, если метод действия формы - post

Теперь по URL-адресу действия у меня работает служба angular 4, конструктор которой выглядит следующим образом: -

constructor(private route: ActivatedRoute,private router: Router,
private secureloginService: SecureloginService,private http: HttpClient) {
  console.info("constructor called");
  this.accessToken = this.route.snapshot
  .queryParams['accessToken'];
  console.info(this.accessToken);
  this.refreshToken = this.route.snapshot
  .queryParams['refreshToken'];
  console.info( this.refreshToken);

  this.route.queryParamMap.subscribe(params => {
    console.info(params);
  });


 }

Я не могу отправить данные при нажатии кнопки отправки. Также обратите внимание, что я включил HTTPS для своего приложения. Для справки я публикую свои данные о маршрутизации angular следующим образом: -

proxy.conf.js

{
"/" : "http://test-pubg.sohum.com:8080",
"secure": false}

компонент-routing.moudle.ts

const routes: Routes = [
  {path: '', component: SecureloginReceiverComponent},
  {path: 'securelogin/', component: SecureloginReceiverComponent,pathMatch: 'full' }
];
export const SecureloginRoutingModule = RouterModule.forChild(routes);

package.json: -

"start": "ng serve --disable-host-check --ssl 1 --proxy-config proxy.conf.json",

Что могло быть возможной причиной такого поведения. Я уже следил за связанными потоками, доступными в stackoverflow и github. за помощь буду благодарен.

🤔 А знаете ли вы, что...
Для создания пользовательских интерфейсов в Angular используется декларативный язык шаблонов.


956
2

Ответы:

Прежде всего, вы должны использовать атрибут Угловые формы, а не HTML <form action, который мешает дизайну Angular SPA.

Я думаю, что ваш proxy-conf.json тоже недействителен

Ты должен попытаться

{
  "/**": {
    "target": "http://test-pubg.sohum.com:8080", //back-end adress:port
    "secure": false,
    "changeOrigin": true
  }
}

Затем в SecureloginReceiverComponent вы должны вызвать метод SecureloginService для публикации входных данных формы (отправленных через атрибуты метода).

Нет необходимости обновлять страницу или помещать входные данные в URL-адрес.


Решено

Итак, настоящая проблема заключалась в статусе HTTP и недоступности параметров в URL-адресе. ActivatedRoute сможет читать все, что передается в URL-адресе, т.е. когда вызывается страница angular, параметр запроса должен быть виден в URL-адресе, тогда только ActivatedRoute сможет читать данные. Во-вторых, я делал межсерверный, то есть от одного сервера к другому, поэтому, хотя во время вызова URL был: -

https://test-pubg.sohum.com:4200/#/securelogin?accessToken=abc&refreshToken=cccc

но после перенаправления он менялся на следующее: -

https://test-pubg.sohum.com:4200/#/securelogin

опуская параметр запроса, что делает их недоступными в URL. Следовательно, ActivatedRoute не смог прочитать. В качестве решения, которое я нашел, нужно явно установить статус HTTP перед перенаправлением на хорошо. Следуйте образцу кода: -

ModelAndView view = new ModelAndView("redirect:" + appUrl);
view.addObject("usr", userName); 
view.setStatus(HttpStatus.OK);

И еще одно очень важное замечание: эта концепция работает только в том случае, если вы выполняете HTTP-запрос GET.