vue中axios的使用 和aes加密解密

axios

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。 axios文档

安装依赖

                npm install axios

                npm install vue-axios

main.js

import Vue from 'vue'
import App from './App.vue'
//elementUI
import './plugins/element.js'
import {  Message } from 'element-ui'
// import {  MessageBox } from 'element-ui'
import router from './router'

import axios from 'axios'
import VueAxios from 'vue-axios'


Vue.config.productionTip = false

axios.defaults.baseURL = 'http://123.com';

//添加请求时拦截器
axios.interceptors.request.use(config=>{
  //设置请求头为 表单提交头
  config.headers['Content-Type'] = "application/x-www-form-urlencoded"

  //设置提交数据为form表单格式
  let formData = new FormData()

  formData.append('p',JSON.stringify(config.data))

  config.data = formData
  
  console.log(config)

  return config
},err=>{
  return Promise.reject(err)
})

// 添加响应时拦截器
axios.interceptors.response.use(res=>{
  if(res.data.code == 200){
    return res
  }else{
    Message({type:'error',message:res.data.msg})
    return res
  }
  
},err=>{
  console.log(err)
})

//把axios注册到vue
Vue.use(VueAxios,axios)

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

login.vue  使用axios发送请求

<template>
  <div class="Login">
      <div class="top">
          <img src="../assets/logo1.png" alt="">
          <div>
              xx管理系统
          </div>
      </div>
      <div class="c-box">
          
        <div class="b-left">
        1111111
        </div>
        <div class="b-right">
            <div class="u-login">
                <div class="u-title">管理员登录</div>
                <el-form class="u-form" ref="form" :model="form" label-width="0px">
                    <el-form-item label="">
                        <el-input v-model="form.name" placeholder="请输入管理员账号"></el-input>
                    </el-form-item>
                    <el-form-item label="">
                        <el-input type="password" v-model="form.password" placeholder="请输入管理员密码"></el-input>
                    </el-form-item>
                    <el-button class="f-button" size="small" @click="login()" type="success">登录</el-button>
                </el-form>
            </div>
            
        </div>
        
      </div>
  </div>
</template>

<script>
// @ is an alias to /src
export default {
  name: 'Login',
  data(){
      return{
          form:{
              name:'',
              password:''
          }
      }
  },
  methods:{
      login(){
           //使用axios
          this.axios.post('/?s=App.DoLogin',{
            //   service:'App.Admin.DoLogin',
              username:this.form.name,
              password:this.form.password
          })
          .then(res=>{
            //   this.$message(res.data.msg)
              console.log(res)
          })
          .catch(err=>{
              console.log(err)
          })
      }
  }
}
</script>
<style scoped>
html,body{
    background:#4EB88C;
    width:100vw;
    height:100vh;
}
.Login{
    /* display: flex;
    justify-content: center;
    align-items:center;     */
    background:#4EB88C;
    width:100vw;
    height:100vh;
}
.top{
    width:100%;
    background:#ffffff;
    border-bottom:1px solid #f9f0f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding:15px 40px;
    box-sizing:border-box;
    font-size:20px;
    color:#494949;
    box-shadow:0px 3px 10px #999999;
}
.top img{
    width:100px;
    height:40px;
}

.c-box{
    display:flex;
    justify-content:space-between;
    align-items: center;
    width:60vw;
    height:80vh;
    margin:0 auto;
}
.b-left{
    height:60vh;
    background:#c9c9c9;
    flex: 1;

}
.b-right{
    height:500px;
    width:20vw;
    background:#ffffff;
    box-shadow:0px 0px 15px #696969;
}
.u-title{
    color:#4EB88C;
    text-align: center;
    border-bottom: 1px solid #747474;
    width:80%;
    margin:0 auto;
    font-weight: bold;
    font-size:20px;
    padding:15px 0;
}
.u-form{
    width:80%;
    margin:10px auto;
    text-align: center;
    margin-top:30px;
}
.u-form .f-button{
    background:#4EB88C;
    width:100% !important;
    margin-top:16px;
}
</style>

AES加密解密使用

更多细节：十分钟读懂AES加密算法 

安装依赖   npm install crypto-js

main.js

import Vue from 'vue'
import App from './App.vue'

import './plugins/element.js'
import {  Message } from 'element-ui'
// import {  MessageBox } from 'element-ui'

import router from './router'

import axios from 'axios'
import VueAxios from 'vue-axios'

// aes加密解密
import AES from './plugins/AES.js'

Vue.config.productionTip = false

axios.defaults.baseURL = 'http://123.com';
// axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
// axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';


//添加请求时拦截器
axios.interceptors.request.use(config=>{

  //设置请求头为 表单提交头
  config.headers['Content-Type'] = "application/x-www-form-urlencoded"


  // AES 加密
  var encrypts = AES.encrypt(JSON.stringify(config.data))
  // //AES 解密
  // let de = JSON.parse(AES.decrypt(encrypts))
  // console.log('解密：', de)

  //设置提交数据为form表单格式
  let formData = new FormData()

  formData.append('p',encrypts)
  // formData.append('p',JSON.stringify(config.data))

  config.data = formData
  
  console.log(config)

  return config
},err=>{
  return Promise.reject(err)
})


// 添加响应时拦截器
axios.interceptors.response.use(res=>{

  if(res.data.code == 200){
    //AES 解密
    let de = AES.decrypt(res.data)
    console.log('解密：', de)
    res.data = de
    return res
  }else{
    Message({type:'error',message:res.data.msg})
    return res
  }
  
},err=>{
  console.log(err)
})


Vue.use(VueAxios,axios)

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

AES.js

import CryptoJS from 'crypto-js';
const iv = '2099475638181938'
const keyStr = '1556896841231548'
 
export default {
    //随机生成指定数量的16进制key
    generatekey(num) {
        let library = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
        let key = "";
        for (var i = 0; i < num; i++) {
            let randomPoz = Math.floor(Math.random() * library.length);
            key += library.substring(randomPoz, randomPoz + 1);
        }
        return key;
    },
    
    //加密
    encrypt(word) {
        var key = CryptoJS.enc.Utf8.parse(keyStr);
        var srcs = CryptoJS.enc.Utf8.parse(word);
        var encrypted = CryptoJS.AES.encrypt(srcs, key, { iv:CryptoJS.enc.Utf8.parse(iv), mode: CryptoJS.mode.CBC, padding: CryptoJS.pad.Pkcs7 });
        return encrypted.toString();
    },
    //解密
    decrypt(word) {
        var key = CryptoJS.enc.Utf8.parse(keyStr);
        var decrypt = CryptoJS.AES.decrypt(word, key, { iv:CryptoJS.enc.Utf8.parse(iv), mode: CryptoJS.mode.CBC, padding: CryptoJS.pad.Pkcs7 });
        return CryptoJS.enc.Utf8.stringify(decrypt).toString();
    }
 
}