JS登錄密碼基於token和CryptoJS加密處理方法

1.登錄前先請求，獲取一個token，也可以在本地寫死
暫且叫登錄token，用來給登錄時密碼的加密

async getToken(){
    const {data:token} = await getToken()         
    // token : eaaaaaaaaaIUzI1NiJ9.eyJ1aWQiOiJDRTY3,例如這樣的
    this.token = token
}

2.使用登錄token，通過CryptoJS給password加密

ps：當然要和後端商量好. npm i crypto-js

// 記得導入
let CryptoJS = require('crypto-js');
 
 
 
// 規定截取登錄token的多少位
let key = CryptoJS.enc.Utf8.parse(this.token.substr(0, 30));
// 拿到登錄時輸入的密碼
let srcs = CryptoJS.enc.Utf8.parse(this.password);
// 加密方式
let encrypted = CryptoJS.AES.encrypt(srcs, key, {
    mode: CryptoJS.mode.ECB,
    padding: CryptoJS.pad.Pkcs7
});
 
let data = {
    name:this.name,
    // 這樣即可完成加密
    password:encrypted.toString(),
    token:this.token
}
 
// 請求登錄即可
this.goLogin(data)

 

3.解密（後端完成即可）
ps: key和配置信息一定要溝通成完全一樣，才能解密成功

// pwd 即爲加密後的密碼。 例如 5CSUSaG2vhvoITJESgTR6A==
 
let key = CryptoJS.enc.Utf8.parse(this.token.substr(0, 30));
 
let decrypted = CryptoJS.AES.decrypt(this.pwd, key, {
     mode: CryptoJS.mode.ECB,
     padding: CryptoJS.pad.Pkcs7
});
 
 
// 獲得解密後的密碼
 
let resPwd = decrypted.toString(CryptoJS.enc.Utf8)

 

4.登錄

// 登錄請求
async goLogin(data){
    const {data:res} = await goLogin(data)
    
    // 成功後，拿到用戶token，把token寫入session中
    window.sessionStorage.setItem('token', res.token);
    
}

 

5.在請求攔截中設置，每次請求時帶上token

ajax.interceptors.request.use(config => {
  // headers加參數
  let token = window.sessionStorage.getItem('token');
  config.headers.common['x-access-token'] = token;
  return config;
},(error) => {
  console.log(erroe)
});

6.後端拿到token
解密token獲得userId , 根據需要 返回前端需要的數據

用戶下次再請求時 , 如果token還在有效期內,不需要重新登陸