本文旨在介紹 login 相關(guān)的功能的實(shí)現(xiàn)和標(biāo)準(zhǔn)，以及輸入信息的校驗(yàn)標(biāo)準(zhǔn)。

1. 標(biāo)準(zhǔn)描述

1. 賬號(hào)

• 必填
• 兩端不能輸入空格

2. 密碼

• 必填
• 不能輸入空格
• 長度在 8 - 30 之間
• 必須使用 字母+數(shù)字+特殊符號(hào) 的要求。
• 盡量不要使用 password 字樣來做密碼屬性， 會(huì)被某些安全掃描視為漏洞，比如 奇安信 的某些 版本。
• 密碼輸入框在沒有具體要求的情況下要使用 show-password , 以便查看密碼信息。
• 注： 修改密碼時(shí)候也要遵循該規(guī)則。

3. 驗(yàn)證碼

• 在沒有具體要求不使用的情況下都要使用驗(yàn)證碼
• 四位數(shù)字（很多項(xiàng)目都在使用）

4. 加密

• 使用RSA1024來加密(很多項(xiàng)目都是這么加密的)
• 賬號(hào)密碼都要加密

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

2. 代碼實(shí)現(xiàn)

• 必填操作參考 ElementPlus 的 具體實(shí)現(xiàn)。

• 以密碼為例做個(gè)必填演示。

  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: '請(qǐng)輸入正確的密碼,長度在8-30之間，必須包含大小寫字母數(shù)據(jù)和特殊符號(hào)!',
        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('請(qǐng)輸入正確的密碼,長度在8-30之間，必須包含大小寫字母數(shù)據(jù)和特殊符號(hào)!'))
      }
    }
  }
                                   
  

• 賬號(hào)密碼加密

  • 安裝加密工具

    yarn add jsencrypt -D # 默認(rèn)就是Rsa1024的加密方式， 本文繼續(xù)使用這個(gè)
    
    yarn add crypto-js # 跟多的加密方式參考
    

• 與后端溝通加密方式和等級(jí)，建議使用 Rsa1024

• Rsa1024 的使用方法。

  // 在utils目錄下創(chuàng)建 Rsa/index.ts 文件。
  
  import JSEncrypt from 'jsencrypt'
  
  // 因?yàn)楹蠖颂峁┑氖莗ck#8的密鑰對(duì)，所以這里使用 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
  }
  
  

• 調(diào)用加密方法

  // 調(diào)用賬號(hào)密碼加密
  import Rsa from '../utils/Rsa/index.ts'
  
  const submit = () => {
      const params = {
          userName: Rsa(rlueForm.userName),
          pwd: Rsa(ruleForm.pwd),
          verify: ruleForm.verify
      }
    // 。。。
  }
  
  

• 驗(yàn)證碼

  • 采用常用的4位數(shù)字的驗(yàn)證碼格式。

  • 展示效果參考
    verify code.png

  • 具體實(shí)現(xiàn)

    • 通過ajax請(qǐng)求去后端獲取驗(yàn)證碼
    • 獲取到的驗(yàn)證是 Base64 格式的圖片
    • 把圖片渲染成上面的效果即可。

3. 加密強(qiáng)度排名

排序通常需要基于算法在當(dāng)前已知攻擊方法時(shí)密鑰的長度和大小，適當(dāng)?shù)膮?shù)選擇（如密鑰長度）和實(shí)現(xiàn)安全性也對(duì)安全強(qiáng)度有重大影響。

1. MRD碼和同態(tài)加密：最新的、基于比較復(fù)雜數(shù)學(xué)問題的加密技術(shù)，未知有效攻擊手段，認(rèn)為安全性很高。
2. AES-256：目前最為推薦的對(duì)稱加密標(biāo)準(zhǔn)，長密鑰提供高級(jí)別的安全性。
3. ECC：基于橢圓曲線，相對(duì)于RSA，提供同等安全級(jí)別下更短的密鑰，視作安全。
4. RSA：使用足夠長的密鑰（2048位或以上）時(shí)被認(rèn)為是安全的，但由于潛在的量子計(jì)算威脅，安全地位可能在未來受到挑戰(zhàn)。
5. SHA-3：最新的安全散列算法，設(shè)計(jì)的目的是替代SHA-2，為未來的安全威脅做好準(zhǔn)備。
6. SHA-256：SHA-2系列中廣泛被使用的安全散列算法，被視作安全。
7. 3DES：比DES安全，但由于其使用了DES算法，因此對(duì)暴力攻擊的抵御力較AES弱。
8. SHA-1：由于安全弱點(diǎn)，不再推薦用于安全敏感的環(huán)境。
9. MD5：已經(jīng)被證明對(duì)碰撞攻擊非常脆弱，被認(rèn)為是不安全的。
10. DES：因?yàn)槠涠堂荑€長度而非常容易受到現(xiàn)代暴力攻擊的破解，被認(rèn)為基本不安全。