Question

我使用angularjs和nodejs做了一个小应用程序。应用程序运行正常，但我遇到的唯一问题是每当我刷新页面时，当前用户自动注销并且必须再次重复身份验证过程。

我怎么能纠正这个？我希望用户必须在我点击注销时才注销，而不是每当我刷新页面时都注销.Below是我正在使用的代码。

请帮助......

的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;
      }
    });
  };
});

Answer 1

您通常需要使用浏览器会话，您可以使用本地存储

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);

如果你想在localstorage中获取变量的值请使用以下代码

var variable_name = localStorage.getItem("variable_name");

了解更多信息

click here

在客户端尝试会话管理

1 个答案: