Ionic_Angular Как добавить уникальный идентификатор устройства в заголовок для аутентификации пользователя при входе в систему

Question

Я хотел бы знать, как получить уникальный идентификатор устройства (uuid) через API и добавить его в заголовок для аутентификации пользователя при входе в систему.Ниже я приложил коды для моих auth-service.ts, login.ts и login.html.Спасибо.

Это мой auth-service.ts

import {HttpClient} from '@angular/common/http';
import {HttpHeaders} from '@angular/common/http';
import { Injectable } from '@angular/core';
import { resolveDefinition } from '@angular/core/src/view/util';
//import { Http, Headers} from '@angular/http';
import { HttpClientModule} from '@angular/common/http';
import {Observable} from 'rxjs/Observable';
import 'rxjs/add/operator/map';

const apiUrl = "http://websvr.nexasoft.my:81/api/V1/";
/*
  Generated class for the AuthServiceProvider provider.

  See https://angular.io/guide/dependency-injection for more info on providers
  and Angular DI.
*/
@Injectable()
export class AuthServiceProvider {
  
  constructor(public http: HttpClient) {
    console.log('Hello AuthServiceProvider Provider');
  }

  userAuthentication(userName,password){
    var data = "username="+userName+"&password="+password;
    var regHeader = new HttpHeaders({'Content-Type':'application/x-www-urlencoded'});
    return this.http.post(apiUrl +'', data,{headers: regHeader});
  }
}

Это мой логин.ts

import { Component } from '@angular/core';
import { IonicPage, NavController } from 'ionic-angular';
import { MenuPage } from '../menu/menu';
import { HomePage } from '../home/home';
import { RegisterPage } from '../register/register';
import { AuthServiceProvider } from  "../../providers/auth-service";
import { HttpErrorResponse } from '@angular/common/http';

/**
 * Generated class for the LoginPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: 'page-login',
  templateUrl: 'login.html',
})
export class LoginPage {
  responseData : any;
  userData = {"userName":"","password":""};
  isLoginError : boolean = false;
  constructor(public navCtrl: NavController, private authServiceProvider: AuthServiceProvider) {
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad LoginPage');
  }

  OnSubmit(userName,password){
    this.authServiceProvider.userAuthentication(userName, password).subscribe((data : any)=>{
     localStorage.setItem('userToken', data.access_token);
     this.navCtrl.push(RegisterPage);
    },
    (err : HttpErrorResponse)=>{
      this.isLoginError = true;
    });
  }
  goToRegister(){

    this.navCtrl.push(RegisterPage);
  
  }
}

Это мой login.html.Используется для входа.

<ion-content class="color">
  <img src="../assets/imgs/logo_icon.png" style="margin-left:20%; margin-top:40%; height:60px;"/>
  <img src="../assets/imgs/logo_text.png" style="position: absolute; margin-left:5%; margin-top:45%; height:20px;"/>

  <div class="label">
    <ion-input class="input" placeholder="Username" type="text" value="" [(ngModel)]="userData.userName"></ion-input>
  </div>
  <div class="label1" no-lines>
    <ion-input class="input" placeholder="Password" type="password" value="" [(ngModel)]="userData.password"></ion-input>
  </div>
  <br/>
  <button class="butt" ion-button block outline color (click)="OnSubmit()"><strong>LOGIN</strong></button>
  <button class="buttt" ion-button block outline color (click)="goToRegister()"><strong>REGISTER</strong></button>


  <button ion-button block clear class="forget" color="LoginForgotPasswordText">Recover Password</button>
</ion-content>