本文旨在介绍 login 相关的功能的实现和标准，以及输入信息的校验标准。

1. 标准描述

1. 账号

• 必填
• 两端不能输入空格

2. 密码

• 必填
• 不能输入空格
• 长度在 8 - 30 之间
• 必须使用 字母+数字+特殊符号 的要求。
• 尽量不要使用 password 字样来做密码属性， 会被某些安全扫描视为漏洞，比如 奇安信 的某些 版本。
• 密码输入框在没有具体要求的情况下要使用 show-password , 以便查看密码信息。
• 注： 修改密码时候也要遵循该规则。

3. 验证码

• 在没有具体要求不使用的情况下都要使用验证码
• 四位数字（很多项目都在使用）

4. 加密

• 使用RSA1024来加密(很多项目都是这么加密的)
• 账号密码都要加密

5. 登录成功后 token 的有效期，

2. 代码实现

• 必填操作参考 ElementPlus 的 具体实现。

• 以密码为例做个必填演示。

  const reg = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[$@$!%*#?&.～、,:;+–=_^：；。，？！￥~·_—`\\|/-])[A-Za-z\d$@$!%*?&#.～、,:;+–=_^：；。，？！￥~·_—`\\|/-]{8,30}/
  
  const rules = reactive<FormRules<typeof ruleForm>>({
    pwd: [
        /**
       * 使用 validator 和 pattern 两种方式都可以
       */
      // { validator: validatePass, trigger: 'blur' }
      { required: true, message: 'please input your pwd!', trigger: 'blur' },
      {
        pattern: reg,
        message: '请输入正确的密码,长度在8-30之间，必须包含大小写字母数据和特殊符号!',
        trigger: 'blur'
      }
    ],
  })
  
  const validatePass = (rule: any, value: any, callback: any) => {
    if (value === '') {
      callback(new Error('Please input the password'))
    } else {
      const res = reg.test(value)
      if (res) {
        callback()
      } else {
        callback(new Error('请输入正确的密码,长度在8-30之间，必须包含大小写字母数据和特殊符号!'))
      }
    }
  }
                                   
  

• 账号密码加密

  • 安装加密工具

    yarn add jsencrypt -D # 默认就是Rsa1024的加密方式， 本文继续使用这个
    
    yarn add crypto-js # 跟多的加密方式参考
    

• 与后端沟通加密方式和等级，建议使用 Rsa1024

• Rsa1024 的使用方法。

  // 在utils目录下创建 Rsa/index.ts 文件。
  
  import JSEncrypt from 'jsencrypt'
  
  // 因为后端提供的是pck#8的密钥对，所以这里使用 KEYUTIL.getKey来解析密钥
  let key = ''
  if (process.env.VUE_APP_API_SERVER === 'prod') {
    key = 'MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQDYV9ccEjwx/1UWINY80DoQQRvwUoyM0oa6n8P/XPc7TafshKtAEugJRTlEbCmi0T+issBnFhggWFHFUx898XHVSvuzavO94zq767ivHH0qPyG70PW9C51mWgKE9k9FeSblMfRJscUg6UOLST4yXAhdBIw1+KdPx/ryRH4WfsRjWwIDAQAB'
  } else {
    key = 'MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQDYV9ccEjwx/1UWINY80DoQQRvwUoyM0oa6n8P/XPc7TafshKtAEugJRTlEbCmi0T+issBnFhggWFHFUx898XHVSvuzavO94zq767ivHH0qPyG70PW9C51mWgKE9k9FeSblMfRJscUg6UOLST4yXAhdBIw1+KdPx/ryRH4WfsRjWwIDAQAB'
  }
  
  export default (str) => {
    let encrypt = new JSEncrypt()
    encrypt.setPublicKey(key)
    let encrypted = encrypt.encrypt(str)
    return encrypted
  }
  
  

• 调用加密方法

  // 调用账号密码加密
  import Rsa from '../utils/Rsa/index.ts'
  
  const submit = () => {
      const params = {
          userName: Rsa(rlueForm.userName),
          pwd: Rsa(ruleForm.pwd),
          verify: ruleForm.verify
      }
    // 。。。
  }
  
  

• 验证码

  • 采用常用的4位数字的验证码格式。

  • 展示效果参考
    verify code.png

  • 具体实现

    • 通过ajax请求去后端获取验证码
    • 获取到的验证是 Base64 格式的图片
    • 把图片渲染成上面的效果即可。

3. 加密强度排名

排序通常需要基于算法在当前已知攻击方法时密钥的长度和大小，适当的参数选择（如密钥长度）和实现安全性也对安全强度有重大影响。

1. MRD码和同态加密：最新的、基于比较复杂数学问题的加密技术，未知有效攻击手段，认为安全性很高。
2. AES-256：目前最为推荐的对称加密标准，长密钥提供高级别的安全性。
3. ECC：基于椭圆曲线，相对于RSA，提供同等安全级别下更短的密钥，视作安全。
4. RSA：使用足够长的密钥（2048位或以上）时被认为是安全的，但由于潜在的量子计算威胁，安全地位可能在未来受到挑战。
5. SHA-3：最新的安全散列算法，设计的目的是替代SHA-2，为未来的安全威胁做好准备。
6. SHA-256：SHA-2系列中广泛被使用的安全散列算法，被视作安全。
7. 3DES：比DES安全，但由于其使用了DES算法，因此对暴力攻击的抵御力较AES弱。
8. SHA-1：由于安全弱点，不再推荐用于安全敏感的环境。
9. MD5：已经被证明对碰撞攻击非常脆弱，被认为是不安全的。
10. DES：因为其短密钥长度而非常容易受到现代暴力攻击的破解，被认为基本不安全。