效果:完成用户注册及登录,并实现基础持久登录方法
页面部分:
<div style = "text-align: center;">
<div style="font-size: 14px; color: #006eff; margin-bottom: 30px; margin-top: 10px;">
即日起所有用户均需登录,请自行注册账号,推荐使用邮箱前缀
</div>
<div id = "Login" class="login_container">
<h2>登录</h2>
<form id="loginForm" onsubmit="submitForm(event)">
<div class="form-group">
<label for="username">账号:</label>
<input type="text" id="username" name="username" required>
</div>
<div class="form-group">
<label for="password">密码:</label>
<input type="password" id="password" name="password" required>
</div>
<div class="form-group">
<button type="button" onclick="showRegister()" class="left-button">注册</button>
<button type="submit" class="right-button">登录</button>
</div>
</form>
</div>
<div id="register" class="login_container" style="display: none;">
<h2>注册</h2>
<form id="registerForm" onsubmit="registerForm(event)">
<div class="form-group">
<label for="username">账号:</label>
<span class="error-message">请使用邮箱前缀注册</span>
<input type="text" id="registerUsername" name="username" required>
</div>
<div class="form-group">
<label for="password">密码:</label>
<input type="password" id="registerPassword" name="password" required>
</div>
<div class="form-group">
<label for="confirm_password">确认密码:</label>
<span id="passwordError" class="error-message"></span>
<input type="password" id="confirmPassword" name="confirm_password" required>
</div>
<div class="form-group">
<button type="button" onclick="showLogin()" class="left-button">返回登录</button>
<button type="submit" class="right-button">注册</button>
</div>
</form>
</div>
</div>
JS部分:利用localStorage进行基础信息存储,此处可以加入更多的逻辑,来实现复杂的验签方式。
<script>
var value = {};
this.scope.action = function() { return value; }
devices_list = {};
(function(scope) {
scope.$watch('msg', function(msg) {
dashboard_toolbar_init()
if (msg) {
switch (msg.type) {
case 'user_exsit':
alert('账号已存在')
msg.type = ''
break;
case 'user_success':
alert('注册成功')
msg.type = ''
break;
case 'login_err':
alert("账号/密码错误");
msg.type = ''
break;
case 'login_success':
show_login_info(msg.username)
msg.type = ''
break;
default:
break;
}
}
});
})(scope);
function dashboard_toolbar_init() {
/* 自己想显示的toolbar设计 */
}
function usr_exit() {
var isLoggedIn = localStorage.getItem('isLoggedIn');
var usrname = localStorage.getItem('usrname');
if ((isLoggedIn == null) || (isLoggedIn == 'false') || (usrname == null)) {
return;
}
if(confirm("是否确认退出")){
var login_btn = document.getElementById('login_btn');
login_btn.innerHTML = '未登录'
localStorage.setItem('isLoggedIn', false);
localStorage.setItem('usrname', '');
value.type = "Login"
value.data = 'null';
document.getElementById("save_pb").click();
}
}
function show_login_info(username) {
var login_btn = document.getElementById('login_btn');
login_btn.innerHTML = username + ' | 退出'
localStorage.setItem('isLoggedIn', true);
localStorage.setItem('usrname', username);
value.type = "go_others"
value.data = '首页';
document.getElementById("save_pb").click();
}
function submitForm(event) {
event.preventDefault();
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
var login_btn = document.getElementById('login_btn');
value.type = "submitForm"
value.data = {}
value.data.usrname = username
value.data.psswd = password
document.getElementById("save_pb").click();
}
function showRegister() {
document.getElementById("Login").style.display = "none";
document.getElementById("register").style.display = "inline-block";
}
function showLogin() {
document.getElementById("register").style.display = "none";
document.getElementById("Login").style.display = "inline-block";
}
function registerForm(event) {
event.preventDefault();
var username = document.getElementById("registerUsername").value;
var password = document.getElementById("registerPassword").value;
var confirmPassword = document.getElementById("confirmPassword").value;
if (password !== confirmPassword) {
document.getElementById("passwordError").textContent = "密码不一致";
return;
} else {
document.getElementById("passwordError").textContent = "";
value.type = "registerForm"
value.data = {}
value.data.usrname = username
value.data.psswd = password
document.getElementById("save_pb").click();
}
}
</script>
在其他页面可对登录用户及状态进行检查,未登录则跳转到Login页面,登录则显示用户名
function check_usr_login_status() {
var isLoggedIn = localStorage.getItem('isLoggedIn');
var usrname = localStorage.getItem('usrname');
if ((isLoggedIn == null) || (isLoggedIn == 'false') || (usrname == null)) {
value = {}
value.type = "Login"
value.data = 'null';
document.getElementById("save_pb").click();
} else {
/*set toolbar name*/
g_login_usrname = usrname
}
}