├── static
    └── .gitkeep
├── config
    ├── prod.env.js
    ├── dev.env.js
    └── index.js
├── src
    ├── assets
    │   └── logo.png
    ├── App.vue
    ├── utils
    │   ├── mock.js
    │   └── secret.js
    ├── router
    │   └── index.js
    ├── main.js
    └── views
    │   └── index.vue
├── .editorconfig
├── .gitignore
├── .babelrc
├── .postcssrc.js
├── index.html
├── README.md
└── package.json


/static/.gitkeep:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/config/prod.env.js:
--------------------------------------------------------------------------------
1 | 'use strict'
2 | module.exports = {
3 |   NODE_ENV: '"production"'
4 | }
5 | 


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Chris-wei/vue-crypto/HEAD/src/assets/logo.png


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <router-view/>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | export default {
 9 |   name: 'App'
10 | }
11 | </script>
12 | 


--------------------------------------------------------------------------------
/src/utils/mock.js:
--------------------------------------------------------------------------------
1 | import secret from './secret'
2 | 
3 | const userInfo = {
4 |   "name" : "Chris" ,
5 |   "sex" : "male"
6 | }
7 | 
8 | export default secret.Encrypt(JSON.stringify(userInfo))


--------------------------------------------------------------------------------
/config/dev.env.js:
--------------------------------------------------------------------------------
1 | 'use strict'
2 | const merge = require('webpack-merge')
3 | const prodEnv = require('./prod.env')
4 | 
5 | module.exports = merge(prodEnv, {
6 |   NODE_ENV: '"development"'
7 | })
8 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | root = true
 2 | 
 3 | [*]
 4 | charset = utf-8
 5 | indent_style = space
 6 | indent_size = 2
 7 | end_of_line = lf
 8 | insert_final_newline = true
 9 | trim_trailing_whitespace = true
10 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules/
 3 | /dist/
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | 
 8 | # Editor directories and files
 9 | .idea
10 | .vscode
11 | *.suo
12 | *.ntvs*
13 | *.njsproj
14 | *.sln
15 | 


--------------------------------------------------------------------------------
/.babelrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "presets": [
 3 |     ["env", {
 4 |       "modules": false,
 5 |       "targets": {
 6 |         "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
 7 |       }
 8 |     }],
 9 |     "stage-2"
10 |   ],
11 |   "plugins": ["transform-vue-jsx", "transform-runtime"]
12 | }
13 | 


--------------------------------------------------------------------------------
/.postcssrc.js:
--------------------------------------------------------------------------------
 1 | // https://github.com/michael-ciniawsky/postcss-load-config
 2 | 
 3 | module.exports = {
 4 |   "plugins": {
 5 |     "postcss-import": {},
 6 |     "postcss-url": {},
 7 |     // to edit target browsers: use "browserslist" field in package.json
 8 |     "autoprefixer": {}
 9 |   }
10 | }
11 | 


--------------------------------------------------------------------------------
/src/router/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Router from 'vue-router'
 3 | import Index from '@/views/index'
 4 | 
 5 | Vue.use(Router)
 6 | 
 7 | export default new Router({
 8 |   routes: [
 9 |     {
10 |       path: '/',
11 |       name: 'Index',
12 |       component: Index
13 |     }
14 |   ]
15 | })
16 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 6 |     <title>vue-crypto</title>
 7 |   </head>
 8 |   <body>
 9 |     <div id="app"></div>
10 |     <!-- built files will be auto injected -->
11 |   </body>
12 | </html>
13 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | // The Vue build version to load with the `import` command
 2 | // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
 3 | import Vue from 'vue'
 4 | import App from './App'
 5 | import router from './router'
 6 | 
 7 | Vue.config.productionTip = false
 8 | 
 9 | /* eslint-disable no-new */
10 | new Vue({
11 |   el: '#app',
12 |   router,
13 |   components: { App },
14 |   template: '<App/>'
15 | })
16 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # vue-crypto
 2 | 
 3 | > 前端 AES 加解密的实现
 4 | 
 5 | ## 参考文章
 6 | 感兴趣的小伙伴可以参考我的这篇文章[前端 crypto-js aes 加解密](https://juejin.im/post/5acf3b0c5188255c620f781b)
 7 | 
 8 | ## Build Setup
 9 | 
10 | ``` bash
11 | # install dependencies
12 | npm install
13 | 
14 | # serve with hot reload at localhost:8080
15 | npm run dev
16 | 
17 | # build for production with minification
18 | npm run build
19 | 
20 | # build for production and view the bundle analyzer report
21 | npm run build --report
22 | ```
23 | 
24 | For a detailed explanation on how things work, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).
25 | 


--------------------------------------------------------------------------------
/src/utils/secret.js:
--------------------------------------------------------------------------------
 1 | const CryptoJS = require('crypto-js');  //引用AES源码js
 2 | 
 3 | const key = CryptoJS.enc.Utf8.parse("1234123412ABCDEF"); //十六位十六进制数作为秘钥
 4 | const iv = CryptoJS.enc.Utf8.parse('ABCDEF1234123412'); //十六位十六进制数作为秘钥偏移量
 5 | 
 6 | //解密方法
 7 | function Decrypt(word) {
 8 |     let encryptedHexStr = CryptoJS.enc.Hex.parse(word);
 9 |     let srcs = CryptoJS.enc.Base64.stringify(encryptedHexStr);
10 |     let decrypt = CryptoJS.AES.decrypt(srcs, key, { iv: iv, mode: CryptoJS.mode.CBC, padding: CryptoJS.pad.Pkcs7 });
11 |     let decryptedStr = decrypt.toString(CryptoJS.enc.Utf8);
12 |     return decryptedStr.toString();
13 | }
14 | //加密方法
15 | function Encrypt(word) {
16 |     let srcs = CryptoJS.enc.Utf8.parse(word);
17 |     let encrypted = CryptoJS.AES.encrypt(srcs, key, { iv: iv, mode: CryptoJS.mode.CBC, padding: CryptoJS.pad.Pkcs7 });
18 |     return encrypted.ciphertext.toString().toUpperCase();
19 | }
20 | 
21 | export default {
22 | 	Decrypt ,
23 | 	Encrypt
24 | }


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-crypto",
 3 |   "version": "1.0.0",
 4 |   "description": "A Vue.js project",
 5 |   "author": "chenwei <cryptic_v@163.com>",
 6 |   "private": true,
 7 |   "scripts": {
 8 |     "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
 9 |     "start": "npm run dev",
10 |     "build": "node build/build.js"
11 |   },
12 |   "dependencies": {
13 |     "axios": "^0.18.0",
14 |     "crypto-js": "^3.1.9-1",
15 |     "vue": "^2.5.2",
16 |     "vue-router": "^3.0.1"
17 |   },
18 |   "devDependencies": {
19 |     "autoprefixer": "^7.1.2",
20 |     "babel-core": "^6.22.1",
21 |     "babel-helper-vue-jsx-merge-props": "^2.0.3",
22 |     "babel-loader": "^7.1.1",
23 |     "babel-plugin-syntax-jsx": "^6.18.0",
24 |     "babel-plugin-transform-runtime": "^6.22.0",
25 |     "babel-plugin-transform-vue-jsx": "^3.5.0",
26 |     "babel-preset-env": "^1.3.2",
27 |     "babel-preset-stage-2": "^6.22.0",
28 |     "chalk": "^2.0.1",
29 |     "copy-webpack-plugin": "^4.0.1",
30 |     "css-loader": "^0.28.0",
31 |     "extract-text-webpack-plugin": "^3.0.0",
32 |     "file-loader": "^1.1.4",
33 |     "friendly-errors-webpack-plugin": "^1.6.1",
34 |     "html-webpack-plugin": "^2.30.1",
35 |     "node-notifier": "^5.1.2",
36 |     "optimize-css-assets-webpack-plugin": "^3.2.0",
37 |     "ora": "^1.2.0",
38 |     "portfinder": "^1.0.13",
39 |     "postcss-import": "^11.0.0",
40 |     "postcss-loader": "^2.0.8",
41 |     "postcss-url": "^7.2.1",
42 |     "rimraf": "^2.6.0",
43 |     "semver": "^5.3.0",
44 |     "shelljs": "^0.7.6",
45 |     "uglifyjs-webpack-plugin": "^1.1.1",
46 |     "url-loader": "^0.5.8",
47 |     "vue-loader": "^13.3.0",
48 |     "vue-style-loader": "^3.0.1",
49 |     "vue-template-compiler": "^2.5.2",
50 |     "webpack": "^3.6.0",
51 |     "webpack-bundle-analyzer": "^2.9.0",
52 |     "webpack-dev-server": "^2.9.1",
53 |     "webpack-merge": "^4.1.0"
54 |   },
55 |   "engines": {
56 |     "node": ">= 6.0.0",
57 |     "npm": ">= 3.0.0"
58 |   },
59 |   "browserslist": [
60 |     "> 1%",
61 |     "last 2 versions",
62 |     "not ie <= 8"
63 |   ]
64 | }
65 | 


--------------------------------------------------------------------------------
/src/views/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="wrapper">
 3 |         <!--加密-->
 4 |         <div class="example-box">
 5 |             <div class="title">加密示例</div>
 6 |             <p class="msg">明文：{{ msg }}</p>
 7 |             <button class="encrypt-btn" @click="encrypt">加密</button>
 8 |             <p class="msg">{{ encryptMsg }}</p>
 9 |         </div>
10 |         <!--解密-->
11 |         <div class="example-box">
12 |             <div class="title">解密示例</div>
13 |             <p class="msg">密文：{{ userInfo }}</p>
14 |             <button class="encrypt-btn" @click="decrypt">解密</button>
15 |             <p class="msg">{{ decryptMsg }}</p>
16 |         </div>
17 |     </div>
18 | </template>
19 | 
20 | <script>
21 |     import secret from '../utils/secret'
22 |     import userInfo from '../utils/mock'
23 |     export default{
24 |     	data(){
25 |     		return {
26 |     			msg : 'This is a clear text' ,
27 | 				encryptMsg : '' ,
28 |                 userInfo : userInfo ,
29 | 				decryptMsg : ''
30 | 			}
31 |         },
32 |         methods : {
33 | 			encrypt(){
34 | 				this.encryptMsg = '密文：' + secret.Encrypt(this.msg);
35 |             },
36 | 			decrypt(){
37 |                 this.decryptMsg = '明文：' + secret.Decrypt(this.userInfo);
38 |             }
39 |         }
40 |     }
41 | </script>
42 | 
43 | <style scoped>
44 |     .msg{
45 |         color: #333;
46 |         text-align: center;
47 |         font-size: 24px;
48 |         min-width: 40px;
49 |         line-height: 40px;
50 |     }
51 |     .encrypt-btn{
52 |         display: block;
53 |         margin: 15px auto;
54 |         font-size: 14px;
55 |         padding: 10px 15px;
56 |         text-align: center;
57 |         border: none;
58 |         outline: none;
59 |         color: #fff;
60 |         cursor: pointer;
61 |         background-color: #409eff;
62 |         -webkit-appearance: none;
63 |         border-radius: 4px;
64 |         -webkit-user-select: none;
65 |         min-width: 100px;
66 |     }
67 |     .example-box{
68 |         margin: 100px auto 0;
69 |     }
70 |     .example-box .title{
71 |         font-size: 24px;
72 |         color: #333;
73 |         text-align: center;
74 |         font-weight: bold;
75 |     }
76 | </style>


--------------------------------------------------------------------------------
/config/index.js:
--------------------------------------------------------------------------------
 1 | 'use strict'
 2 | // Template version: 1.3.1
 3 | // see http://vuejs-templates.github.io/webpack for documentation.
 4 | 
 5 | const path = require('path')
 6 | 
 7 | module.exports = {
 8 |   dev: {
 9 | 
10 |     // Paths
11 |     assetsSubDirectory: 'static',
12 |     assetsPublicPath: '/',
13 |     proxyTable: {},
14 | 
15 |     // Various Dev Server settings
16 |     host: 'localhost', // can be overwritten by process.env.HOST
17 |     port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
18 |     autoOpenBrowser: false,
19 |     errorOverlay: true,
20 |     notifyOnErrors: true,
21 |     poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
22 | 
23 |     
24 |     /**
25 |      * Source Maps
26 |      */
27 | 
28 |     // https://webpack.js.org/configuration/devtool/#development
29 |     devtool: 'cheap-module-eval-source-map',
30 | 
31 |     // If you have problems debugging vue-files in devtools,
32 |     // set this to false - it *may* help
33 |     // https://vue-loader.vuejs.org/en/options.html#cachebusting
34 |     cacheBusting: true,
35 | 
36 |     cssSourceMap: true
37 |   },
38 | 
39 |   build: {
40 |     // Template for index.html
41 |     index: path.resolve(__dirname, '../dist/index.html'),
42 | 
43 |     // Paths
44 |     assetsRoot: path.resolve(__dirname, '../dist'),
45 |     assetsSubDirectory: 'static',
46 |     assetsPublicPath: '/',
47 | 
48 |     /**
49 |      * Source Maps
50 |      */
51 | 
52 |     productionSourceMap: true,
53 |     // https://webpack.js.org/configuration/devtool/#production
54 |     devtool: '#source-map',
55 | 
56 |     // Gzip off by default as many popular static hosts such as
57 |     // Surge or Netlify already gzip all static assets for you.
58 |     // Before setting to `true`, make sure to:
59 |     // npm install --save-dev compression-webpack-plugin
60 |     productionGzip: false,
61 |     productionGzipExtensions: ['js', 'css'],
62 | 
63 |     // Run the build command with an extra argument to
64 |     // View the bundle analyzer report after build finishes:
65 |     // `npm run build --report`
66 |     // Set to `true` or `false` to always turn it on or off
67 |     bundleAnalyzerReport: process.env.npm_config_report
68 |   }
69 | }
70 | 


--------------------------------------------------------------------------------