登录操作-

1、验证码 

1、请求验证码图片,正常的get请求,每次在最后面传一个随机数,防止缓存出现同样的验证码

2、点击图片也是请求获取一张图片回来,前端用img显示

2、密码加密

1、加密方式有好多,以下是私钥和公钥对称的加密方式

VUE_APP_PUBLIC_KEY就是公钥,这个公钥需要于服务器的私钥是一对,才能解密,解密成功会再于账户所设置的密码去匹配

import JSEncrypt from 'jsencrypt'

const env = document.querySelector('html').dataset

const crypt = new JSEncrypt()
crypt.setPublicKey(env.publicKey || process.env.VUE_APP_PUBLIC_KEY)

var b64map = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/'
var b64pad = '='

function hex2b64(h) {
  var i
  var c
  var ret = ''
  for (i = 0; i + 3 <= h.length; i += 3) {
    c = parseInt(h.substring(i, i + 3), 16)
    ret += b64map.charAt(c >> 6) + b64map.charAt(c & 63)
  }
  if (i + 1 === h.length) {
    c = parseInt(h.substring(i, i + 1), 16)
    ret += b64map.charAt(c << 2)
  } else if (i + 2 === h.length) {
    c = parseInt(h.substring(i, i + 2), 16)
    ret += b64map.charAt(c >> 2) + b64map.charAt((c & 3) << 4)
  }
  while ((ret.length & 3) > 0) {
    ret += b64pad
  }
  return ret
}

JSEncrypt.prototype.encryptLong = function(string) {
  var k = this.getKey()

  try {
    var ct = ''
    // RSA每次加密117bytes,需要辅助方法判断字符串截取位置
    // 1.获取字符串截取点
    var bytes = []
    bytes.push(0)
    var byteNo = 0
    var len, c
    len = string.length
    var temp = 0
    for (var i = 0; i < len; i++) {
      c = string.charCodeAt(i)
      if (c >= 0x010000 && c <= 0x10ffff) {
        byteNo += 4
      } else if (c >= 0x000800 && c <= 0x00ffff) {
        byteNo += 3
      } else if (c >= 0x000080 && c <= 0x0007ff) {
        byteNo += 2
      } else {
        byteNo += 1
      }
      if (byteNo % 117 >= 114 || byteNo % 117 === 0) {
        if (byteNo - temp >= 114) {
          bytes.push(i)
          temp = byteNo
        }
      }
    }
    // 2.截取字符串并分段加密
    if (bytes.length > 1) {
      for (var j = 0; j < bytes.length - 1; j++) {
        var str
        if (j === 0) {
          str = string.substring(0, bytes[j + 1] + 1)
        } else {
          str = string.substring(bytes[j] + 1, bytes[j + 1] + 1)
        }
        var t1 = k.encrypt(str)
        ct += t1
      }
      if (bytes[bytes.length - 1] !== string.length - 1) {
        var lastStr = string.substring(bytes[bytes.length - 1] + 1)
        ct += k.encrypt(lastStr)
      }

      return hex2b64(ct)
    }
    const t = k.encrypt(string)
    return hex2b64(t)
  } catch (ex) {
    console.error(ex)
    return false
  }
}

export {
  crypt
}

用法

import { crypt } from '@/utils/rsa'
password = crypt.encryptLong(password)
password就是输入的密码

3、登录成功之后

把用户信息存储到浏览器,拿到token,每次请求都把token带回去

4、退出登录之后

把存储在浏览器的信息storage.clear()清除

猜你喜欢

转载自blog.csdn.net/qq_45838276/article/details/128234600