I made a little application using angularjs and nodejs. The application is running fine but the only problem I am encountering is that whenever I refresh the page, the current user automatically logs out and the authentication process has to be repeated again.
How could I correct this ? I want that the user must logout only when I am clicking on logout and not whenever I am refreshing the page.Below is the code that I am using.
Kindly help...
index.html
<html>
<head>
<title>Chirp</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular-route.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular-resource.js"></script>
<script src="javascripts/chirpApp.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="stylesheets/style.css">
</head>
<body ng-app="chirpApp">
<div id='main' class="container">
<nav class="navbar-fluid navbar-default navbar-fixed-top">
<div class="container">
<a class="navbar-brand" href="#"> Chirp! </a>
<p class="navbar-text"> Learn the MEAN stack by building this tiny app</p>
<p class="navbar-right navbar-text" ng-hide="authenticated"><a href="#/login">Login</a> or <a href="#/signup">Register</a></p>
<p class="navbar-right navbar-text" ng-show="authenticated"><a href="#" ng-click="signout()">Logout</a></p>
<p class="navbar-right navbar-text" ng-show="authenticated">Signed in as {{current_user}}</p>
</div>
</nav>
<div class="col-md-offset-2 col-md-8">
<div ng-view>
</div>
</div>
</div>
</body>
</html>
login.html
<form class="form-auth" ng-submit="login()">
<h2>Log In</h2>
<p class="text-warning">{{error_message}}</p>
<input type="username" ng-model="user.username" placeholder="Username" class="form-control"><br>
<input type="password" ng-model="user.password" placeholder="Password" class="form-control"><br>
<input type="submit" value="Log in" class="btn btn-primary" />
</form>
main.html
<div class="clearfix">
<form ng-Submit="post()" ng-show="authenticated">
<h4>{{current_user}} says</h4>
<textarea required class="form-control" maxlength="200" rows="3" placeholder="Say something" ng-model="newPost.text"></textarea>
<input class="btn submit-btn pull-right" type="submit" value="Chirp!" />
</form>
</div>
<div id="post-stream">
<h4>Chirp Feed</h4>
<div class="post" ng-repeat="post in posts | orderBy:'created_at':true" ng-class-odd="'odd'" ng-class-even="'even'">
<p>{{post.text}}</p>
<small>Posted by @{{post.created_by}}</small>
<small class="pull-right">{{post.created_at | date:"h:mma 'on' MMM d, y"}}</small>
</div>
</div>
chirpApp.js
var app = angular.module('chirpApp', ['ngRoute', 'ngResource']).run(function($rootScope,$http) {
$rootScope.authenticated = false;
$rootScope.current_user = '';
$rootScope.signout = function(){
$http.get('auth/signout');
$rootScope.authenticated = false;
$rootScope.current_user = '';
};
});
app.config(function($routeProvider){
$routeProvider
//the timeline display
.when('/', {
templateUrl: 'main.html',
controller: 'mainController'
})
//the login display
.when('/login', {
templateUrl: 'login.html',
controller: 'authController'
})
//the signup display
.when('/signup', {
templateUrl: 'register.html',
controller: 'authController'
});
});
app.factory('postService', function($resource){
return $resource('/api/posts/:id');
});
app.controller('mainController', function(postService, $scope, $rootScope){
$scope.posts = postService.query();
$scope.newPost = {created_by: '', text: '', created_at: ''};
$scope.post = function() {
$scope.newPost.created_by = $rootScope.current_user;
$scope.newPost.created_at = Date.now();
postService.save($scope.newPost, function(){
$scope.posts = postService.query();
$scope.newPost = {created_by: '', text: '', created_at: ''};
});
};
});
app.controller('authController', function($scope, $http, $rootScope, $location){
$scope.user = {username: '', password: ''};
$scope.error_message = '';
$scope.login = function(){
$http.post('/auth/login', $scope.user).success(function(data){
if(data.state == 'success'){
$rootScope.authenticated = true;
$rootScope.current_user = data.user.username;
$location.path('/');
}
else{
$scope.error_message = data.message;
}
});
};
$scope.register = function(){
$http.post('/auth/signup', $scope.user).success(function(data){
if(data.state == 'success'){
$rootScope.authenticated = true;
$rootScope.current_user = data.user.username;
$location.path('/');
}
else{
$scope.error_message = data.message;
}
});
};
});
