用js写一个登录功能并且由js判断是否登录 无需后端服务
前言
最近在使用码云的giteepages功能在码云上放了几个网页，在实现基本的展现之后，此时博主在想怎么可以再不调用后端接口的方式进行安全验证呢，为了将白嫖进行到底，还真有一个小方法，一起来看看吧。
解决思路
其实整体思路很简单，灵感是来自于当时使用jwt做安全验证的一个小demo，主要就是要利用一个浏览器附带的一个本地存储器—localStorage，这个东西主要起的功能就是在我们验证密码正确之后，将登陆成功的信息存储在本地，方便我们在访问其他页面时可以通过验证localStorage中存储的信息进行验证是否登录，整体思路就是这样，来看看怎么解决吧。
代码
主要代码
验证密码是否正确
因为不需要调用后端程序，这里我们只能采用固定密码的方式，当然如果觉得太明显了点，可以加密一下，这里大家有兴趣可以搞一下
function isRight(pwd) {
if (pwd == "123") {
return true
} else {
return false;
}
}
登录功能
$('#login').click(function() {
pwd = $('#pwd').val()
flag = isRight(pwd)
if (flag) {
//这里存储验证成功信息，为了后面访问权限页面的验证做准备
localStorage.setItem("pwd", pwd)
//登陆成功就跳转页面
window.location.href = 'test.html'
} else {
alert("密码错误，请重试")
}
});
验证是否登录
//在localStorage中拿出我们刚刚存储的信息进行验证
pwd = localStorage.getItem("pwd")
if (pwd == null || !isEasy(pwd)) {
window.location.href = 'login.html'
}
完整代码
登陆界面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>登录</title>
</head>
<body>
<input id="pwd">
<button id="login">登录</button>
<button id="logout">退出</button>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/us.js">
</script>
<script>
$('#login').click(function() {
pwd = $('#pwd').val()
flag = isRight(pwd)
if (flag) {
localStorage.setItem("pwd", pwd)
window.location.href = 'test.html'
} else {
alert("密码错误，请重试")
}
});
$('#logout').click(function() {
localStorage.removeItem("pwd")
})
</script>
</body>
</html>
需要权限页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/us.js">
</script>
<script>
$(function() {
pwd = localStorage.getItem("pwd")
if (pwd == null || !isRight(pwd)) {
window.location.href = 'login.html'
}
})
</script>
</body>
</html>
成果
突发奇想想做一下，很简单的小功能，其实没啥实用性，但就是突然想起来了，有兴趣的做一下吧
