【核心思路】
token=MD5(时间戳+静态字符串)
【设计原理】
后端登录成功后——生成token1,token1组成规则是MD5(时间戳+静态字符串)——返回前端并写入localStorage浏览器本地缓存——权限页面验证逻辑是:每次访问权限页面,都进行无态校验,校验原理是:权限页面(即后端页面)通过当前的时间戳生成token2=MD5(时间戳+静态字符串)——再比对token1与token2——相等代表在允许时间范畴内可以访问这个页面,否则退回登录页面。
【登录成功并写入token到前端浏览器缓存】
index.html页面
<style>
.loginCon{
width:600px;
margin:0 auto;
margin-top:100px;
}
.loginCon > div:nth-child(1){
font-size:24px;
color:#06C;
font-weight:bold;
text-align:center;
letter-spacing:3px;
}
.loginCon > div{
margin-top:20px;
}
.loginCon > div > span{
display:inline-block;
width:100px;
color: #06F;
line-height:40px;
}
.loginCon > div > input{
width:300px;
height:40px;
border:1px solid #06F;
outline:none;
border-radius:8px;
box-sizing:border-box;
padding:5px;
}
.loginCon > div > button{
width:100px;