【Vue】crypto-jsを用いて暗号化したデータをLocalStorageに保存する

はじめに

「Vuexに保持してあるデータはリロードすると消えるのかい？！」
「でもLocalStorageにそのまま保存するのは危険ではないかい？！」
　＼じゃあ暗号化しよう！／

ということで、暗号化したデータをLocalStorageに保存する方法をご紹介します。

使用するライブラリ

crypto-js

参考： CryptoJS

インストール

npm install crypto-js

もしくは

yarn add crypto-js

TypeScript環境では、上記だけだと怒られてしまうので、以下を実行しましょう

npm install --save @types/crypto-js

もしくは

yarn add @types/crypto-js

実装

sample.ts

import crypto from 'crypto-js';

// 暗号化する
const ecrypted = crypto.AES.encrypt('暗号化したいデータ', '任意の暗号化フレーズ');

// LocalStorageに保存する
// 注意！:暗号化した値を使用する時は、toString()を忘れずに
localStorage.setItem('ecryptedData', ecrypted.toString());

// LocalStorageから取り出す
const ecryptedData = localStorage.getItem('ecryptedData')

// 復号する
// 注意!:復号化した値を使用する時は、エンコードを忘れずに
const decrypted = crypto.AES.decrypt(ecryptedData, '任意の暗号化フレーズ');
console.log(decrypted.toString(crypto.enc.Utf8));

注意点

上でも書いておりますが、

暗号化した値を使用する時は、toString()を忘れずに。
復号化した値を使用する時は、エンコード = toString(crypto.enc.Utf8)を忘れずに。