AES基本使用 (ionic)

npm install aes-js

在服务中使用 定义加密 解密方法

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import CryptoJS from "crypto-js"
const key = CryptoJS.enc.Utf8.parse("1234123412ABCDEF");  //十六位十六进制数作为密钥
const iv = CryptoJS.enc.Utf8.parse('1234123412ABCDEF');   //十六位十六进制数作为密钥偏移量
/*
  Generated class for the ServeProvider provider.

  See https://angular.io/guide/dependency-injection for more info on providers
  and Angular DI.
*/
@Injectable()
export class ServeProvider {

  constructor(public http: HttpClient) {
  
  }
  // 加密
   Encrypt(word) {
    let srcs = CryptoJS.enc.Utf8.parse(word);
    let encrypted = CryptoJS.AES.encrypt(srcs, key, { iv: iv, mode: CryptoJS.mode.CBC, padding: CryptoJS.pad.Pkcs7 });
    console.log(encrypted.ciphertext.toString().toUpperCase())
    return encrypted.ciphertext.toString().toUpperCase();
}
  // 解密
   Decrypt(word) {
  let encryptedHexStr = CryptoJS.enc.Hex.parse(word);
  let srcs = CryptoJS.enc.Base64.stringify(encryptedHexStr);
  let decrypt = CryptoJS.AES.decrypt(srcs, key, { iv: iv, mode: CryptoJS.mode.CBC, padding: CryptoJS.pad.Pkcs7 });
  let decryptedStr = decrypt.toString(CryptoJS.enc.Utf8);
  console.log(decrypt.toString(CryptoJS.enc.Utf8))
  return decryptedStr.toString();
}

}

在需要的页面定义触发方法

<ion-header>
  <ion-navbar>
    <ion-title>ASE</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
   <button ion-button (click)="add()">加密</button>
  <br>
  <button ion-button (click)="unadd()">解密</button>
</ion-content>

在需要的页面逻辑内引入服务

import { Component } from '@angular/core';
import { ServeProvider } from '../../providers/serve/serve';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})

export class HomePage {
public a;
  constructor(public navCtrl: NavController,public serve:ServeProvider) {

  }
  add(){
   this.a = this.serve.Encrypt('赛亚人')
  }
  unadd(){
    this.serve.Decrypt(this.a)
  }

}