登录页面，密码在请求携带参数中加密
注意：使用什么加密方法 要配合后端去使用，因为加密会后的数据要后端去解构
步骤：
下载 加密的依赖包
npm i jsencrypt
在当前页面引入
获取公钥，再把密码放到对应的函数中即可
加密效果演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>测试登录</title>
<style>
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
}
body {
height: 100%;
}
.container {
height: 100%;
background-image: linear-gradient(to right, #fbc2eb, #a6c1ee);
}
.login-wrapper {
background-color: #fff;
width: 358px;
height: 588px;
border-radius: 15px;
padding: 0 50px;
position: relative;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.header {
font-size: 38px;
font-weight: bold;
text-align: center;
line-height: 200px;
}
.input-item {
display: block;
width: 100%;
margin-bottom: 20px;
border: 0;
padding: 10px;
border-bottom: 1px solid rgb(128, 125, 125);
font-size: 15px;
outline: none;
}
.input-item:placeholder {
text-transform: uppercase;
}
.btn {
text-align: center;
padding: 10px;
width: 100%;
margin-top: 40px;
background-image: linear-gradient(to right, #a6c1ee, #fbc2eb);
color: #fff;
}
.msg {
text-align: center;
line-height: 88px;
}
a {
text-decoration-line: none;
color: #abc1ee;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsencrypt/3.2.1/jsencrypt.min.js"></script>
</head>
<body>
<div class="container">
<div class="login-wrapper">
<div class="header">Login</div>
<div class="form-wrapper">
<input type="text" name="username" placeholder="username" class="input-item">
<input type="password" name="password" placeholder="password" class="input-item">
<button class="btn" onclick="login1()">登录</button>
</div>
<div class="msg">
Don't have account?
<a href="#">Sign up</a>
</div>
</div>
</div>
<script>
function login1()
{
var password_input=document.getElementsByName("password").item(0);
var password=password_input.value;
var publickey ="-----BEGIN PUBLIC KEY-----MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAxQMhy5xEETuAqgk/058RRcNgQp28CaVg3Oyi1PAloBerTwPuI5uYcj3CxG+ZPdaaXICuu+rwpbBZbiEuQhqTyzEolaoa76C33hG9IM9+ChBTU1twaMY/Qq7xkjI9Ej4DM8VSXyPlj6rA4aWH74pXPOEworsctSM/pzRoFqupvE0i4XYWdCpl4rUGTFiJ2uCt5JPwNd8hbSbHmvfeg2JFEmq2FjLHtPSoPyBvOfZ/Ssq5zFA2pL6kgh569Z73rqapvOql8HUxXHsKb/WB0n1S1rGTUzZykteVA7IFbH1TZTHAWhzLd0sbwwYxk/5ZHdYR9w5EsdwSR1woM5Amv/QJNwIDAQAB-----END PUBLIC KEY-----";
var crypt = new JSEncrypt();
crypt.setKey(publickey);
var enc = crypt.encrypt(password);
window.alert(enc);
}
</script>
</body>
</html>
后端设置更新 tokan 接口 - 前端主动去更新
步骤：
- 登录成功后记录当时 时间戳 存在本地中
- 在 axios 请求拦截器中 声明一个你想多久开始更新 tokan 的时间，如： 60*1000（1分钟）
- 在用户每次发起请求的时候获取当前时间戳，再获取之前存储在本地的时间戳，两者减去大于我们设置的1分钟，那么就发起请求更新 token
- 更新token请求在 vuex 中异步执行，更新完之后也有记录本次的时间戳
- 还要判断当前记录时间戳是否为一致，避免上次更新token的请求还没回来，又一次发起更新token请求
axios 中的代码
vuex 中的代码
table表格 导出 Excel 表格
代码演示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>测试AAA</title>
<script src="https://cdn.sheetjs.com/xlsx-latest/package/dist/xlsx.mini.min.js"></script>
</head>
<body>
<button onclick="btn_export()">导出Excel</button>
<table border="1" id="table1">
<tr>
<th>班级</th>
<th>学号</th>
<th>姓名</th>
</tr>
<tr>
<th rowspan="2">一班</th>
<td>20090101</td>
<td>张三</td>
</tr>
<tr>
<td>20090102</td>
<td>李四</td>
</tr>
<tr>
<td>二班</td>
<td>20090201</td>
<td>王五</td>
</tr>
</table>
<script>
function btn_export() {
var table1 = document.getElementById("table1");
var sheet = XLSX.utils.table_to_sheet(table1);//将一个table对象转换成一个sheet对象
openDownloadDialog(sheet2blob(sheet),'下载.xlsx');
}
// 将一个sheet转成最终的excel文件的blob对象，然后利用URL.createObjectURL下载
function sheet2blob(sheet, sheetName) {
sheetName = sheetName || 'sheet1';
var workbook = {
SheetNames: [sheetName],
Sheets: {}
};
workbook.Sheets[sheetName] = sheet; // 生成excel的配置项
var wopts = {
bookType: 'xlsx', // 要生成的文件类型
bookSST: false, // 是否生成Shared String Table，官方解释是，如果开启生成速度会下降，但在低版本IOS设备上有更好的兼容性
type: 'binary'
};
var wbout = XLSX.write(workbook, wopts);
var blob = new Blob([s2ab(wbout)], {
type: "application/octet-stream"
}); // 字符串转ArrayBuffer
function s2ab(s) {
var buf = new ArrayBuffer(s.length);
var view = new Uint8Array(buf);
for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
return buf;
}
return blob;
}
function openDownloadDialog(url, saveName) {
if (typeof url == 'object' && url instanceof Blob) {
url = URL.createObjectURL(url); // 创建blob地址
}
var aLink = document.createElement('a');
aLink.href = url;
aLink.download = saveName || ''; // HTML5新增的属性，指定保存文件名，可以不要后缀，注意，file:///模式下不会生效
var event;
if (window.MouseEvent) event = new MouseEvent('click');
else {
event = document.createEvent('MouseEvents');
event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
}
aLink.dispatchEvent(event);
}
</script>
</body>
</html>
