前端用户登录与密码验证
2019年4月23日
前端用户登录与密码验证
这里使用的代码为曾经使用过的ATM(详见http://45.76.19.77/?p=105)，当时使用的是cookie操作，但是并不实用，这里描述一种实用的实现方法，就是通过http的get方法向后端请求数据，参数是你输入的账户名，然后后端返回密码的值，在本地进行比对后完成验证。
首先，为了测试，这里写了一个服务端的样例代码。
var http = require('http');
var querystring = require('querystring');
var url = require('url');
http.createServer(function (request, response) {
console.log('receive request');
response.writeHead(200, { 'Content-Type': 'text-plain', 'Access-Control-Allow-Origin':'*'});
var pathname =url.parse(request.url).pathname;
var par = url.parse(request.url).query;
console.log(par)
if(par == "pcx"){
response.end("12345678");//这里默认如果账户时pcx的话，那么返回密码就是12345678
}else{
response.end("default123");//如果账户不是pcx的话，返回的额密码就是default123
}
}).listen(8124);
console.log("node server start ok port "+8124);
这儿有个需要注意的地方是，返回值的头部，默认除了返回一个状态码和一个文本的格式，后面那个参数表示啥的跨域，这儿本人每太弄懂，宸神说，这个就是浏览器的一个策略，防止打开别的网页的，具体咋回事不清楚，反正加了这一句就可以访问了。最后家的那个end就是数据的具体。在命令行用
node 文件名.js
运行。
然后就是具体的客户端的代码，在客户端如果单纯时为了测试用node的话，可以直接这么写
var axios = require('axios');
axios.get('http://127.0.0.1:8124/?pcx').then((res)=>{
console.log(res)
})
这里的axios包需要npm下载，或者
var request = require('request');
request('http://127.0.0.1:8124/?pcx', function (error, response, body) {
if (!error && response.statusCode == 200) {
console.log(body);
}
})
但是有个问题时node的包在浏览器里面并不能直接使用，需要通过Jquery等框架来实现这些功能。所以下面时工程上使用的具体代码：
var i=2;//输入的次数
//判断卡号是否位数字
function isNaNAccount(account){
return isNaN(account);
}
//判断输入的卡号和密码是否为空
function isNaNAccountAndPwd(account,passwordatm){
if((account.length>0)&&(passwordatm.length>0)){
return true;
}
return false;
}
function get_password(account,passwordatm){
$.ajax({
type:'get',
url:'http://127.0.0.1:8124/?'+account,
success:function(res){
if(res==passwordatm){
window.location.href="http://localhost:8000/Index";
}else{
if(i==0){
alert("你的账号已被锁定！");
return;
}
alert("你还剩"+i+"次机会！");
console.log(typeof(passwordatm));
i--;
return ;
}
return res;
},
error:function(err){
console.log('err',err)
}
})
}
//登录事件
function login(){
var account = document.getElementById("account").value;
var passwordatm = document.getElementById("passwordatm").value;
console.log(typeof account);
console.log(passwordatm);
if(!(isNaNAccountAndPwd(account,passwordatm))){
alert("卡号和密码都不能为空");
return;
}
get_password(account,passwordatm)
}
这儿就涉及到一个异步调用的问题，本人原本想的是直接在
login
里面调用
get_password
这个函数，这个函数的唯一目的就是返回网络请求得到的密码，然后再对密码进行匹配，成功的话就执行跳转，但是这儿就出现了一个异步调用的问题，我在发送密码的时候这儿是不会等待执行结果的，它会直接执行下面的代码，但是呢，如果直接执行下面的代码的话，那不就直接GG了吗，所以，直接在这个函数里面调用
Jquery
的
ajax
函数发送请求，然后根据结果执行下面的跳转操作。下面是完整的HTML代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
div{
width: 300px;
height:200px;
margin: 0 auto;
border: 1px solid black;
border-radius: 5px;
text-align: center;
}
p{
font-size: 20px;
}
input{
width: 150px;
height:20px;
}
button{
background-color: #0099FF;
color:white;
border:0px groove gray;
border-radius:20%;
padding:2px 4px;
}
</style>
<body>
<div>
<p>繁星数据平台</p>
<p><label>账号：</label><input type="text" id="account"></p>
<p><label>密码：</label><input type="password" id="passwordatm"></p>
<p><button onclick="login()">登录</button> <button onclick="shut()">取消</button></p>
</div>
</body>
</html>
<script src="https://cdn.bootcss.com/jquery/3.4.0/jquery.min.js"></script>
<script>
function shut(){
window.location.href="fake2.html";
}
var i=2;//输入的次数
//判断卡号是否位数字
function isNaNAccount(account){
return isNaN(account);
}
//判断输入的卡号和密码是否为空
function isNaNAccountAndPwd(account,passwordatm){
if((account.length>0)&&(passwordatm.length>0)){
return true;
}
return false;
}
function get_password(account,passwordatm){
$.ajax({
type:'get',
url:'http://127.0.0.1:8124/?'+account,
success:function(res){
if(res==passwordatm){
window.location.href="http://localhost:8000/Index";
}else{
if(i==0){
alert("你的账号已被锁定！");
return;
}
alert("你还剩"+i+"次机会！");
console.log(typeof(passwordatm));
i--;
return ;
}
console.log('res',res)
return res;
},
error:function(err){
console.log('err',err)
}
})
}
//登录事件
function login(){
var account = document.getElementById("account").value;
var passwordatm = document.getElementById("passwordatm").value;
console.log(typeof account);
console.log(passwordatm);
if(!(isNaNAccountAndPwd(account,passwordatm))){
alert("卡号和密码都不能为空");
return;
}
get_password(account,passwordatm)
}
</script>
Previous
java实现socket通信
Newer