在给出关于Question的详细信息之前,我想告诉大家,项目的架构,项目是由三个独立的部分设计的
1.UI部分,这是在纯HTM-5,JavaScript,Ajax,JSON,RestFull API中,没有任何嵌入代码,如PHP,jSP
2.服务部分,服务是用PHP编写的,这些服务的URL由UI部分访问
3.数据库
我不想在HTML文件中添加任何PHP代码
现在我想在纯html页面中创建登录表单,成功登录后重定向到userProfile,现在用户可以更新配置文件了,我想为这种类型的场景主会话。我成功地登录并重定向到userProfile,其中包含我使用JSON从服务器获取的信息,并在storeUserDataInSession的帮助下将这些信息发送到userProfile现在我想添加更新和注销功能,而不需要再次发送用户名和密码,请帮助我,我是会话管理的新手。
登录表单的JavaScript
<script type="text/javascript">
$(document).ready(function(){
var userData = {
storeUserDataInSession: function(userData) {
var userObjectString = JSON.stringify(userData);
window.sessionStorage.setItem('userObject',userObjectString)
},
getUserDataFromSession: function() {
var userData = window.sessionStorage.getItem('userObject')
return JSON.parse(userData);
}
}
$("#register-form-header").submit(function(){
var uName = $('#userName').val();
var upassd=$('#password').val();
$.ajax({
url:"http://localhost/login/login.php",
type:"POST",
dataType:"json",
data:{type:"login",uName:uName,password:upassd},
ContentType:"application/json",
success: function(response){
userData.storeUserDataInSession(response);
window.location = 'userProfile.html';
},
error: function(err){
//alert(JSON.stringify(err));
alert("fail");
window.location.href = 'error.html';
}
});
return false;
});
//loadJSON(0);
});
</script>
UserProfile的JavaScript
<script>
$( document ).ready(function() {
var userData = {
storeUserDataInSession: function(userData) {
var userObjectString = JSON.stringify(userData);
window.sessionStorage.setItem('userObject',userObjectString)
},
getUserDataFromSession: function() {
var userData = window.sessionStorage.getItem('userObject')
return JSON.parse(userData);
}
}
var userDataObject=userData.getUserDataFromSession();
var id =userDataObject[0].userInfo.id;
var username =userDataObject[0].userInfo.username;
var name =userDataObject[0].userInfo.name;
var address =userDataObject[0].userInfo.address;
var mobile =userDataObject[0].userInfo.mobile;
var email =userDataObject[0].userInfo.email;
document.getElementById('welcomeUser').innerHTML="Welcome Mr"+username;
document.getElementById('userName').value=username;
document.getElementById('Name').value=name;
document.getElementById('email').value=email;
document.getElementById('mobile').value=mobile;
document.getElementById('address1').value=address;
});
</script>
php中的登录服务
<?php
header('Access-Control-Allow-Origin: *');//Should work in Cross Domaim ajax Calling request
include("config.php");
//session_start();
if(isset($_POST['type']))
{
if($_POST['type']=="login"){
$name = $_POST ['uName'];
$password=$_POST ['password'];
$query="SELECT id, username, address, name, mobile, email FROM admin WHERE UserName='nee' AND PASSWORD='12'";
$result=mysql_query($query);
$totalRows=mysql_num_rows($result);
if($totalRows>0){
$recipes=array();
while($recipe=mysql_fetch_array($result, MYSQL_ASSOC)){
$recipes[]=array('userInfo'=>$recipe);
}
echo json_encode($recipes);
}
}
}
else{
echo "Invalid format";
}
?>
您应该为此使用cookie。登录API响应时不要返回用户配置文件信息,而是用PHP创建另一个API,比如~/user/{userId}/profile。
在登录PHP代码中,使用setcookie()函数在客户端浏览器cookie中设置会话id。登录API应该只在成功验证时返回200 OK。如果登录失败,应返回401 Forbidden。
在JavaScript登录页面上,当您收到200 OK状态代码时,将页面重定向到Profiles页面。在配置文件页面上,调用~/user/{userId}/profile API获取用户信息并显示
在概要文件API PHP代码中,确保验证cookie字段$_cookie中的会话id。如果会话id无效,返回401 Forbidden error。
在注销PHP API时,从cookie字段中删除会话id。
使用这种方法,在调用登录API时只发送一次用户名和密码详细信息。之后,您将依靠存储在cookie字段中的会话id进行身份验证。
有关更多信息,请阅读http://www.pontikis.net/blog/create-cookies-php-javascript
任何服务器语言(PHP/JSP)等都使用会话变量(根据请求),您可能希望将这些变量存储在您的一侧(JS/HTML)。然后使用此会话变量值作为参数来完成与注销或更新服务的通信。
您可能会将变量存储为cookie或使用localStorage。
在明文中,登录应该返回JSON
username: name,
session-id: 2352-2532-2352-235-235