基于Token验证的登录方式

首先，引入crypto-js  或者测试直接使用下面的（用浏览器打开下面链接，复制到JS文件里，用script src的方式引到HTML中，避免链接失效）

<script src="https://yiyouqi.oss-cn-shanghai.aliyuncs.com/cdn/rsa/RSA.js"></script><script src="https://yiyouqi.oss-cn-shanghai.aliyuncs.com/cdn/crypto-js/build/components/core-min.js"></script><script src="https://yiyouqi.oss-cn-shanghai.aliyuncs.com/cdn/crypto-js/build/rollups/aes.js"></script>

首先获取公钥，然后对密码进行加密，然后把账号密码发给后端，成功后，后端返回Token,该Token 是加密过的，需要用aes进行解密。解密后对Token 进行Url签名。(把Token和Id放在sessionStorage或者localStorage里避免重复的去后端取)

登录代码如下：

//请求登录接口 let myajax = $.ajax({ url: getkeyApi, timeout: 20000, type: "post", cache: false, dataType: "json", success: function (data) {//获取公钥 if (data.Result) { setMaxDigits(131); const key = new RSAKeyPair(data.Exponent, "", data.Modulus); const username = obj.field.username; const password = obj.field.password; const encrypetedPassword = encryptedString(key, base64encode( password)); $.ajax({ url: loginApi, timeout: 20000, type: "post", data: { userName: username, passWord: encrypetedPassword }, success: function (res) {//登录成功的回调，获取Token存入sessionStorage let _token = res.Data.AccessToken if (res.Result) { sessionStorage.setItem("Id",res.Data.Id) // aes解密 var WfAesUtils = { _KEY: "12345678900000001234567890000000", //32位 _IV: "1234567890000000", //16位 Decrypt: function (str) { var key = CryptoJS.enc.Utf8 .parse(this._KEY); var iv = CryptoJS.enc.Utf8.parse( this._IV); var encryptedHexStr = CryptoJS.enc.Hex.parse( str); var srcs = CryptoJS.enc.Base64.stringify( encryptedHexStr); var decrypt = CryptoJS.AES.decrypt( srcs, key, { iv: iv, mode: CryptoJS.mode .CBC, padding: CryptoJS .pad.Pkcs7 }); var decryptedStr = decrypt.toString( CryptoJS.enc.Utf8); return decryptedStr.toString(); } } let _reToken = WfAesUtils.Decrypt(_token);
//请求成功后，写入 access_token layui.data(layui.setter.tableName, { key: setter.request.tokenName, value: _reToken });
//登入成功的提示与跳转 layer.msg('登录成功', { offset: '15px', icon: 1, time: 1000 }, function () { location.hash = search.redirect ? decodeURIComponent(search.redirect) : '/';
}); } else { layer.msg('登录失败'); } }, error: function (jqXHR, status, ex) { layer.msg('登录失败'); }, beforeSend: function (jqXHR) { layer.load(1); }, complete: function (XMLHttpRequest, status) { layer.closeAll('loading'); if (status === 'timeout') { myajax.abort(); layer.msg('请求超时'); } } }); } else { layer.msg('登录失败'); } }, error: function (jqXHR, status, ex) { layer.msg('登录失败'); }, complete: function (XMLHttpRequest, status) { if (status === 'timeout') { myajax.abort(); layer.msg('请求超时'); } } });

url签名：首先获取Id和Token 在Token前面加上接口地址（/ControllerName/ActionName不懂的小伙伴问后端）

然后对字符串拼接后的Token进行sha256加密，加密后，在操作需要登录后才能操作的接口时，一并传给后端（即本身要传的参数在多加这两个字段userId和sgin）

let sign ; //获取用户ID let userId = sessionStorage.getItem('Id') //获取token let layuiAdmin = localStorage.getItem('layuiAdmin') let _layuiAdmin = JSON.parse(layuiAdmin) let token = _layuiAdmin.AccessToken

let sign_url = '/ControllerName/ActionName' + token let sign_list = sha256(sign_url) sign = sign_list

对于登录后的接口操作都要带上userId 和 Sign

如果本文对您有帮助请点个赞！

Thanks♪(･ω･)ﾉ

阅读更多