xuan hung Nguyen xuan hung Nguyen - 5 months ago 20
AngularJS Question

Maintaining Session on PHP using Angularjs

The code runs well but when I refresh the page service PHP, I don't know how but I already have logged-in. Although I have logged in before.

app.js

web_app.controller("form_dang_nhap_gio_hang", function($scope, $http){
$http({
method: 'GET',
url: 'services/api_kiem_tra_dang_nhap.php'
}).success(function(data, status, headers, config){
$scope.thong_tin_dang_nhap = data;
}).error(function(data, status, headers, config){
alert("lỗi không gửi được!");
});

$scope.btn_dang_nhap_tai_khoan = function(){
data_chuyen_di = '{ "data" : {"ten_dang_nhap":"'+$scope.ten_dang_nhap+'","mat_khau":"'+$scope.mat_khau+'"}}';
//alert(data_chuyen_di);
$http({
url: 'services/api_kiem_tra_dang_nhap.php',
method: "POST",
data: data_chuyen_di,
headers: {'Content-Type': 'application/x-www-form-urlencoded'}
}).success(function (data, status, headers, config) {
//alert(data);
if(data.thong_bao_loi != "")
{
alert(data.thong_bao_loi);
}
else
{
$scope.thong_tin_dang_nhap = data;
$("#modal-id").modal('hide');
}
//$scope.persons = data; // assign $scope.persons here as promise is resolved here
}).error(function (data, status, headers, config) {
alert("lỗi không gửi được!");
});
}


});

PHP service, add Session when it gets the post data if it didn't have session before and login information is right. If it has already been logged in, then it will return login information.

$json = file_get_contents('php://input');
$doi_tuong_truyen_vao = json_decode($json);
//print_r($doi_tuong_truyen_vao);
if($doi_tuong_truyen_vao)
{

include_once("database.php");

$db = new database();

$lenh_sql = "select * from sqa_nguoi_dung WHERE tai_khoan = '" . $doi_tuong_truyen_vao->data->ten_dang_nhap . "'";
$db->setQuery($lenh_sql);
$tt_nguoi_dung = $db->loadRow();
//print_r($tt_nguoi_dung);
if($tt_nguoi_dung)
{
if($tt_nguoi_dung->mat_khau == $doi_tuong_truyen_vao->data->mat_khau)
{
//print_r($tt_nguoi_dung);
$_SESSION["nguoi_dung"] = $tt_nguoi_dung;
$tt_nguoi_dung->thong_bao_loi = "";
echo json_encode($tt_nguoi_dung);
}
else
{
echo '{"thong_bao_loi":"Mật khẩu không chính xác!"}';
}
}
else
{
echo '{"thong_bao_loi":"Tài khoản không tồn tại!"}';
}
}
else
{
if($_SESSION["nguoi_dung"])
{
$chuoi = json_encode($_SESSION["nguoi_dung"]);
echo $chuoi;
}
else
{
$chuoi = "";
}
}


HTML

<div class="col-sm-8" ng-controller="form_dang_nhap_gio_hang">
<div class="shop-menu pull-right">
<ul class="nav navbar-nav">

<li ng-if="thong_tin_dang_nhap.ho_ten"><a href="#"><i class="fa fa-user"></i>{{thong_tin_dang_nhap.ho_ten}}</a></li>
<li><a href="xem-gio-hang"><i class="fa fa-shopping-cart"></i>Giỏ hàng</a><span class="so_luong_trong_gio"></span></li>
<li ng-if="!thong_tin_dang_nhap.ho_ten"><a class="btn" data-toggle="modal" href='#modal-id'><i class="fa fa-lock"></i>Đăng nhập</a></li>
</ul>
</div>
<div class="modal fade" id="modal-id">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4><span class="glyphicon glyphicon-lock"></span>Đăng nhập</h4>
</div>
<div class="modal-body" style="padding:40px 50px;">
<form role="form">
<div class="form-group">
<label for="usrname"><span class="glyphicon glyphicon-user"></span>Tài khoản</label>
<input ng-model="ten_dang_nhap" type="text" class="form-control" id="usrname" placeholder="Nhập tài khoản">
</div>
<div class="form-group">
<label for="psw"><span class="glyphicon glyphicon-eye-open"></span>Mật khẩu</label>
<input ng-model="mat_khau" type="password" class="form-control" id="psw" placeholder="Nhập mật khẩu">
</div>
<div class="checkbox">
<label><input type="checkbox" value="" checked>Ghi nhớ đăng nhập</label>
</div>
<button ng-click="btn_dang_nhap_tai_khoan()" class="btn btn-success btn-block"><span class="glyphicon glyphicon-off"></span> Đăng nhập</button>
</form>
</div>
</div>
</div>
</div>
</div>


Any Idea??

Answer

When You are coding angularjs, You are coding just the client side... and php is server side language... So when you login from client, you should make a sessionvariable on server side as well... and send it to your client to save in local storage or session storage which are html5 functionalities.

Now whenever any request is sent from client to server, that value stored in sessionstorage must be appended to the request.. and checked to server side..

In case it is not available on server side, it should return 403UNAUTHORIZED ACCESS status code... which will be caught by your interceptor and you will be able to maintain the sessions properly.

You can get the localstorage and sessionstorage from this link.. http://ngmodules.org/modules/ngStorage