ionic登录

在app.modules.ts里引入

import { HttpClientModule } from '@angular/common/http';
@NgModule 里imports里的HttpClientModule
@NgModule({
	imports：[HttpClientModule]
}）

HTML文件

 <div class="login">
        <div class="head-portrait">
            <img src="./assets/icon.png" alt="" width="40px" height="40px">
            <p>标题</p>
        </div>
        <div class="form-card">
            <ion-item class="login-iptitem" lines="none">
                <ion-icon class="login-icon" src="./assets/my.svg" slot="end"></ion-icon>
                <ion-input class="login-ipt" placeholder="请输入账号" [(ngModel)]="username"  clearInput></ion-input>
            </ion-item>
            <ion-item class="login-iptitem" lines="none">
                <ion-icon class="login-icon" src="{{showPassword?'./assets/eye-open.svg':'./assets/eye.svg'}}"  (click)='changeShowPassword()'  slot="end" ></ion-icon>
                <ion-input class="login-ipt" placeholder="请输入密码"  [(ngModel)]="password"  clearInput type="{{showPassword?'':'password'}}"></ion-input>
            </ion-item>
            <ion-button  fill="outline" slot="end" (click) = "doLogin()" rout class="login-btn" >登 录</ion-button>
        </div>
    </div>

css文件

.login{
    width: 100%;
    height: 100%;
    //background-color: #6874fe;
    background: url('../../assets/loginbg.png');
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
}
.head-portrait{
    text-align: center;
    position: absolute;
    top: 24%;
    width: 100%;
}
.head-portrait p{
    color: #fff;
    margin-top: 5px;
}
.form-card{
    position: absolute;
    top: 43%;
    width: 82%;
    left: 9%;
}
.login-header{
    padding-bottom: 0px;
}
.head-title{
    float: left;
    height: 100%;
    margin-left:10px;
}
.clear{
    clear:both;
}
.head-title-name{
    color: rgb(79, 158, 241);
    font-size: 14px;   
}
.head-title-wel{
    margin-left: 5px;
    color: #ccc;
    font-size: 12px;
}
.login-iptitem{
    margin-bottom: 20px;
    font-size: 14px;
    --background: transparent;
}
.form-card .login-icon{
    position: absolute;
    left: 0.5em !important;
    top: 3px !important;
}
.login-ipt{
    border: 1px solid #fff;
    border-radius: 20px;
    --color:#fff;
    --padding-start:4em !important;
    --padding-end: 1em;
}
.login-btn{
    width: 90%;
    margin: 0 5%;
    margin-top: 15px;
    height: 40px;
    line-height: 40px;
    --border-radius:20px;
    --border-width:0;
    --background:#b2c0ff;
    --background-hover:#b2c0ff;
    --background-activated:#b2c0ff;
    --background-focused:#b2c0ff;
    --color: #fff;
}

ts文件 用的是HttpClient请求

//先引入所需文件
import { ModalController, ToastController,NavController } from '@ionic/angular';
import { HttpHeaders } from '@angular/common/http';
import { HttpClient } from '@angular/common/http';

//定义变量
	username: string;
    password: string;
    publicKey : string = "";
    public urlRoot = " ";  //定义所用的环境

    constructor(
      private http: HttpClient,
      public toastController: ToastController,
      public navController:NavController
    ) { }

doLogin() {
      let httpOptions: any;
      let sessionId = localStorage.getItem('sessionId');
      if (sessionId) {
        httpOptions = {
          headers: new HttpHeaders({
            'Content-Type': 'application/json',
            'Authorization': sessionId,
            'Access-Control-Allow-Origin': '*'
          })
        };
      } else {
        httpOptions = {
          headers: new HttpHeaders({
            'Content-Type': 'application/json',
            'Access-Control-Allow-Origin': '*'
          })
        };
      }
      this.http.post(this.urlRoot + '/auth/appLogin', { username: this.username, password: this.password }, httpOptions).subscribe(
        (res: any) => {
          console.log(res);
          if (res.code == 200) {
            var tokenId = res.data.tokenId;
            localStorage.setItem('sessionId', tokenId);
            this.navController.back()
          } else {
            this.presentToast(res.message);
          }
        }
      )
    };
    // toast
    async presentToast(message) {
      const toast = await this.toastController.create({
        message: message,
        position: 'top',
        color: 'warning',
        duration: 2000,
      });
      toast.present();
    }