angularjs - Trying Session management at Client side -
i made little application using angularjs , nodejs. application running fine problem encountering whenever refresh page, current user automatically logs out , authentication process has repeated again.
how correct ? want user must logout when clicking on logout , not whenever refreshing page.below code 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 mean stack building 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 {{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 @{{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; } }); }; });
you need use browser session in general can use local storage
var app = angular.module('chirpapp', ['ngroute', 'ngresource']).run(function($rootscope,$http) { $rootscope.signout = function(){ $http.get('auth/signout'); localstorage.setitem("authenticated", false); localstorage.setitem("current_user", ""); }; }); ...... $scope.register = function(){ $http.post('/auth/signup', $scope.user).success(function(data){ if(data.state == 'success'){ localstorage.setitem("authenticated", true); localstorage.setitem("current_user", data.user.username); if want value of variable in localstorage please use following code
var variable_name = localstorage.getitem("variable_name"); for more information
Comments
Post a Comment