后台管理系统第二课:代理和密文加密

一.在vue.config.js中的devServer中，我们添加如下配置

/**
* 每次改vue.config.js的话,需要重启
* 代理-在本地的话是需要代理的,但是线上的话,就不需要
* 访问的是以 '/adminapp' 开头的 , 会把接口重新调到 'http://testadmin.xuexiluxian.cn/'
*
*/

    proxy: {
      '/adminapp': {
      target: 'http://testadmin.xuexiluxian.cn/',
      changeOrigin: true,
      
      // pathRewrite: {
      //   '^/adminapp': ''
      // }
      
      }
    }

二.密文加密

后端使用的密文登录，可以正确登录，但是用户也不能每次输入密文来操作，所以我们接下来要安装一个加解密工具，来对用户输入的用户名和密码进行加密。

1.该工具是Crypto-js，我们可以使用如下命令来进行安装：

npm install crypto-js --save-dev

2.封装Crypto-js工具，在src/utils目录中新建crypto.js，内容如下：

const Crypto = require('crypto-js') // 引用AES源码js
// 默认的 KEY 与 iv 如果没有给
const key = Crypto.enc.Utf8.parse('AOWQ4P0YEC4YXUKS') // 十六位十六进制数作为密钥
const iv = Crypto.enc.Utf8.parse('O3V2GCL1K2HNZ9Y7') // 十六位十六进制数作为密钥偏移量

export default {
  // 解密方法
  Decrypt(word) {
    const encryptedHexStr = Crypto.enc.Hex.parse(word)
    const srcs = Crypto.enc.Base64.stringify(encryptedHexStr)
    const decrypt = Crypto.AES.decrypt(srcs, key, { iv: iv, mode: Crypto.mode.CBC, padding: Crypto.pad.Pkcs7 })
    const decryptedStr = decrypt.toString(Crypto.enc.Utf8)
    return decryptedStr.toString()
  },
  // 加密方法
  Encrypt(word) {
    const srcs = Crypto.enc.Utf8.parse(word)
    const encrypted = Crypto.AES.encrypt(srcs, key, { iv: iv, mode: Crypto.mode.CBC, padding: Crypto.pad.Pkcs7 })
    return encrypted.ciphertext.toString().toUpperCase()
  }
}

3.使用Crypto-js

在登录页面中，引入咱们刚写好的Crypto-js工具：

import Crypto from '@/utils/crypto.js'

接下来在，登录方法中，接口调用前，把数据进行加密，并把加密后的数据组织好数据对象，传进登录接口就OK了。

在handleLogin方法中，具体实现：

const username = Crypto.Encrypt(this.loginForm.username)
const password = Crypto.Encrypt(this.loginForm.password)
const data = {
    username: username,
    password: password
}

 

总结 : 

　　1.调整登录页面

　　　　A.Tabindex (element的)

　　　　B.点击小眼睛动态来改变Input的type属性 ( 点击的时候,判断为text和password,就可以了 )

　　　　C.Utils/validate.js

　　　　D.Aes加密

　　　　　　(1).对称加密

　　　　　　(2).非对称加密

　　　　　　(3).公私钥加密

　　　　E.对用户名和密码进行加密,并且传到vuex中

　　　　F.调用登录接口

　　2.调用登录接口

　　　　A.简单改造了axios工具

　　　　B.对响应的数据进行初步的判断处理

　　　　C.获取返回的Accesstoken并设置token

　　3.简单的分析了路由拦截(导航守卫)

　　看的视频 : https://www.xuexiluxian.cn/player/play?courseId=2d4c763ff074456abe64a2380f523464&chapterId=933cfaeae012475ca7e8d54bb2702e9a