angular7 querystring用户输入未定义的ID和密码

Question

  ```
   **Below code working fine as expected but getting  Id and Password 
'undefind&undefind'.** 
  **I need to show user enter details.Like ID:test and Password;test123
  Could you please help me on this.**
**am getting this format.**
 http://localhost:8089/api/Logins/CheckPassword?ID=[undefind]&Password= 
[undefind

需要此格式   http://localhost:8089/api/Logins/CheckPassword?ID=[test]&Password=[test123]

```text

 Can anyone help me please?

 **login.services**
 ```
 getLoginById(UserID: string,Password: string): Observable<Login[]>{
       debugger;
     let params=new HttpParams().set('ID', UserID).set('Password',Password);
     console.log(params.toString());
     return this.http.get<Login[]>(this.baseURL,{params});
        }
 ```

 **login.component.ts**

 ```typescript
 constructor(
    //  private formbuilder: FormBuilder, 
      private loginService: LoginService,
      private router:Router,
      private route: ActivatedRoute, private formbuilder: FormBuilder)
      {}

     onFormSubmit() {
       this.loading = false;
       const client = this.clientForm.value;
       this.getLogin(client);
       this.clientForm.reset();
     }

   ngOnInit() {
     debugger;
       this.clientForm = this.formbuilder.group({
         UserID: ['', [Validators.required]],
         Password: ['', [Validators.required]]
       });
   }
   getLogin(login :Login){
       debugger; 

  this.loginService.getLoginById(this.clientForm.UserID,this.clientForm.Passwor 
   d).subscribe(() => {
       this.loading = true;
    });
   }
  ```
   ```text

     **login.component.html**
      ```
     <div class="container">
       <mat-card>
         <mat-toolbar color="accent">
           <div align="center" style="color:white;text-align:right;">
             Login
           </div>
         </mat-toolbar>
       <br>
     <br>
     <mat-card-content>
       <form [formGroup]="clientForm"
         (ngSubmit)="onFormSubmit(clientForm.value)"> 
         <table>
       <tr>
           <td class="tbl1">
             <mat-form-field class="demo-full-width">
               <input formControlName="UserID" matTooltip="Enter login UserID" 
    matInput placeholder="UserID">
             </mat-form-field>
             <mat-error>
               <span *ngIf="!clientForm.get('UserID').value && 
        clientForm.get('UserID').touched">
               </span>
             </mat-error>
           </td>
         </tr>

       <tr>
            <td class="tbl1">
               <mat-form-field class="demo-full-width">
                 <input formControlName="Password" matTooltip="Enter login 
    Password" matInput placeholder="Password">
               </mat-form-field>
               <mat-error>
                 <span *ngIf="!clientForm.get('Password').value && 
    clientForm.get('Password').touched">
                 </span>
               </mat-error>
             </td> 
             </tr>
             </table>
             <table>
               <tr>
                   <td class="content-center">
                       <button type="submit" mat-raised-button color="accent" 
              matTooltip="Click Submit Button" [disabled] = 
               "!clientForm.valid">Login</button>
                       <button type="reset" mat-raised-button color="accent" 
            matTooltip="Click Reset Button" (click) = 
         "resetForm()">Reset</button>
                     </td>
               </tr>
             </table>
             </form>
             </mat-card-content>
             </mat-card>
             </div>
        ```

Answer 1

正如Daniel A. White所说，按照您的要求在URL参数中传递用户名和密码不是一个好主意。

您将打开一个巨大的安全漏洞，每个可以拦截您的请求的人都可以窃取您的敏感数据。

无论如何，假设

http://localhost:8089/api/Logins/CheckPassword?ID=[UserID]&Password=[Password]

指的是端点（Web api），您必须以这种方式使用this.http.get()：

const params: {
  'params': {
    'ID': userID,
    'Password': password
  }
};

this.http.get('http://localhost:8089/api/Logins/CheckPassword', params);