// store the IDs of all logged in users in here
var loggedusers = [];
// server should handle everything below...
// users array, which contains all users in the system
// on the server-side this could be an array returned by a MySQL database table, for example
var users = [{
// ID of the user
id: 1,
// username of the user
username: 'user1',
// password of the user, note that this should obviously be hashed on the server-side
// for PHP back-end: preferably hashed with 'password_hash' and compared using 'password_verify' if using PHP version 5.5 or newer
password: 'a',
// type of the user, currently using 'user', 'admin' and 'supplier', but technically it could be _anything_
type: 'user'
}, {
id: 2,
username: 'admin1',
password: 'b',
type: 'admin'
}, {
id: 3,
username: 'supplier1',
password: 'c',
type: 'supplier'
}];
// ... up to this point, never store this data on the client-side (especially highly sensitive information like hashes, salts, or even worse like plain text passwords like above).
/**
* null|Object getUserByProperty (mixed key, mixed value [ , boolean strict = false, boolean multiple = false, boolean case_insensitive = false ])
*
* Gets a user by a property key, value and various settings.
*
* @param mixed key Property key to look for.
* @param mixed value Property value to look for.
* @param boolean strict (optional) Should the comparison be type strict?
* @param boolean multiple (optional) Should it return all results, rather than the first result?
* @param boolean case_insensitive (optional) Should it ignore character case?
*
* @return null|Object Returns the user object, or null, if not found.
*/
function getUserByProperty(key, value, strict, multiple, case_insensitive) {
// prepare a result array
var result = [];
// loop through all of our users
for (var index in users) {
// get the user we are iterating through now
var user = users[index];
// check if the user has the specified property
if (typeof user[key] != 'undefined') {
// get the property value
var compare = user[key];
// doing something case insensitive
if (case_insensitive) {
// if the property value is a string
if (typeof compare == 'string')
// we want to turn it to lower case
compare = compare.toLowerCase();
// if the specified value is a string
if (typeof value == 'string')
// we want to turn it to lower case
value = value.toLowerCase();
}
// if specified value is not defined, or values match
if (typeof value == 'undefined' || ((strict && compare === value) || (!strict && compare == value))) {
// if we want multiple results
if (multiple) {
// the result will be appended to the result array
result.push(user);
} else {
// otherwise we just return it
return user;
}
}
}
}
// return the results or null, if nothing was found (for single match search)
return multiple ? result : null;
}
/**
* null|Object getUserById (number id)
*
* Gets a user with the specified ID.
*
* @param number id ID of user to get.
*
* @return null|Object Returns the user object, or null, if not found.
*/
function getUserById(id) {
return getUserByProperty('id', id);
}
/**
* null|Object getUserByUsername (string username [ , boolean case_insensitive = false ])
*
* Gets a user with the specified username.
*
* @param string username Username of user to get.
* @param boolean case_insensitive Should character case be ignored?
*
* @return null|Object Returns the user object, or null, if not found.
*/
function getUserByUsername(username, case_insensitive) {
return getUserByProperty('username', username, false, false, case_insensitive);
}
/**
* boolean|array getUsersByType (string type [ , boolean case_insensitive = false ])
*
* Gets all users with the specified type.
*
* @param string type Type of user to look for.
* @param boolean case_insensitive Should character case be ignored?
*
* @return array Returns the an array of user objects.
*/
function getUsersByType(type, case_insensitive) {
return getUserByProperty('type', type, false, true, case_insensitive);
}
/**
* boolean|Object login (string username, string password)
*
* Provides the functionality to be able to log in on a user.
*
* @param string username Username of the user to log in on.
* @param string password Password of the user to log in on.
*
* @return boolean|Object Returns the user object, or false, if login was not successful.
*/
function login(username, password) {
// checks whether username and password have been filled in
if (typeof username == 'string' && typeof password == 'string' && username.length > 0 && password.length > 0) {
// prepare a variable to store the user object, if any is received
var loggeduser;
// server should handle everything below...
// iterate through all users in the 'users' array (or database table perhaps, on server-side)
for (var index in users) {
// grab the property value with the property
var user = users[index];
// check if username and password match
if (username === user.username && password === user.password)
// set value of 'loggeduser' to the property value (user)
loggeduser = user;
}
// ... up to this point, and the user returned from the server should be set in to 'loggeduser'
// make sure highly sensitive information is not returned, such as hash, salt or anything
// check whether the user is set
if (typeof loggeduser != 'undefined') {
// save the ID of the user to the 'loggedusers' array
loggedusers[loggeduser.id] = true;
// update the logged in list
updatelist();
// return the received user object
return loggeduser;
}
}
return false;
}
/**
* boolean logout (number userid)
*
* Provides the functionality to be able to log out from a user.
*
* @param number userid ID of the user to log out of.
*
* @return boolean Returns a boolean representing whether the log out was successful or not.
*/
function logout(userid) {
// check whether the ID is actually logged in
if (loggedusers[userid]) {
// temporary array, which we will be filling
var temporary = [];
// let's loop through logged users
for (var id in loggedusers)
// ignore our user
if (id != userid)
// let's put this user to the array
temporary[id] = true;
// we replace the 'loggedusers' array with our new array
loggedusers = temporary;
// update the logged in list
updatelist();
// we have successfully logged out
return true;
}
// we have not successfully logged out
return false;
}
/**
* boolean updatelist (void)
*
* Provides the functionality to update the #logged-in-list element
* with the logged in users names and logout links.
*
* @return boolean Returns a boolean representing whether the update was successful or not.
*/
function updatelist() {
// get the #logged-in-list element
var list_element = document.getElementById('logged-in-list');
// check the element exists
if (list_element) {
// get the #logged-in element
var list_container_element = document.getElementById('logged-in');
// check the element exists and that we should be changing the styles
if (list_container_element)
// if there are no logged in users, "hide" the element, otherwise "show" it
list_container_element.style.visibility = loggedusers.length === 0 ? 'hidden' : 'visible';
// we take the first child with a while loop
while (list_element.firstChild)
// remove the child, and it will repeat doing so until there is no firstChild left for the list_element
list_element.removeChild(list_element.firstChild);
// we loop through every logged in user
for (var id in loggedusers) {
// get the user by ID
var user = getUserById(id);
// check if that user is a user
if (user) {
// we create necessary elements to cover our logout functionality
var p = document.createElement('P');
p.innerText = user.username;
var a = document.createElement('A');
a.userid = id;
a.href = '#';
a.innerHTML = '(logout)';
// we bind an onclick event listener to the link
a.addEventListener('click', function(e) {
e.preventDefault();
// we will now execute the logout function for this user ID
logout(e.srcElement.userid);
});
// we append the link to the paragraph element
p.appendChild(a);
// we append the paragraph to the list element
list_element.appendChild(p);
}
}
return true;
}
return false;
}
// add a new 'onsubmit' event listener to the '#login-form' node
// this will be triggered each time the form is submitted via any method
document.getElementById('login-form').addEventListener('submit', function(e) {
// prevent default browser behavior
e.preventDefault();
// find the username and password nodes
var username_element = e.srcElement.elements.username;
var password_element = e.srcElement.elements.password;
// check whether these elements return right stuff
if (username_element && password_element) {
// get the values of username and password
username = username_element.value;
password = password_element.value;
// execute the 'login' function with the username and password filled in on the client
var user = login(username, password);
// check whether the login was successful
if (user !== false) {
// reset the username input field
username_element.value = '';
// reset the password input field
password_element.value = '';
// alert the client that login was successful
alert('Logged in as ' + user.username + '.');
} else {
// reset the password input field
password_element.value = '';
// alert the client that login was not successful
alert('Invalid username and/or password.');
}
}
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Login Form</title>
</head>
<body>
<div style="visibility: hidden;" id="logged-in">
<p><strong>Logged in as:</strong>
</p>
<div id="logged-in-list"></div>
</div>
<form id="login-form">
<h2>Login Form</h2>
<label for="username">Username:</label>
<input type="text" placeholder="Enter username..." id="username" />
<label for="password">Password:</label>
<input type="password" placeholder="Enter password..." id="password" />
<input type="submit" value="Login" />
</form>
<!-- the JavaScript code should go as contents of this tag -->
<script></script>
</body>
</html>
這是一個簡單的測試，或者是用於生產的東西，因爲您不應該像這樣存儲/驗證密碼客戶端。 – Andy
@Andy這是一個簡單的測試。稍後我會在服務器端進行密碼驗證，謝謝您的回覆。 –
在我看來，你應該有一個單用戶數組，每個用戶都是其中的一個對象。他們都有一個領域，例如'type'設置爲任何類型的用戶，他們是「用戶」，「管理員」，「供應商」等。目前，您正在分別循環每個列表，我認爲這是做簡單登錄的最有效方法。 – ascx