AngularJS - показывать/скрывать элементы навигации, если пользователь вошел в систему

Ответ 1

вы можете использовать $rootScope для обмена информацией по всему приложению:

.controller('NavController',function($scope,$http, $rootScope) {

    $scope.isLoggedIn = function() {

      $http.get('/checklogin')
        .success(function(data) {
          console.log(data);
          $rootScope.loggedIn = data;
        })
        .error(function(data) {
          console.log('error: ' + data);
        });
    };
};

теперь вы можете изменить значение loggedIn из других мест вашего приложения, обратившись к $rootScope.loggedIn таким же образом, как это сделано в приведенном выше коде.

С учетом сказанного вы должны отнести соответствующий код к сервису и директиве. Это позволит вам иметь одно центральное место для обработки, входа в систему, выхода из системы и состояния $rootScope.loggedIn. Если вы разместите остальную часть соответствующего кода, я могу помочь вам с более конкретным ответом.

Ответ 2

Вы можете транслировать это событие, когда пользователь регистрируется успешно. И не нужно продолжать опрос вашего сервера, если пользователь зарегистрирован, вы можете сохранить переменную в памяти, которая сообщает, если у вас есть действующий сеанс или нет. Вы можете использовать аутентификацию на основе токенов, установленную на стороне сервера:

services.factory('UserService', ['$resource',                                        
  function($resource){

    // represents guest user - not logged
    var user = {
        firstName : 'guest',
        lastName : 'user',
        preferredCurrency : "USD",
        shoppingCart : {
            totalItems : 0,
            total : 0
        },                                                  
    };

    var resource = function() {
        return $resource('/myapp/rest/user/:id', 
            { id: "@id"}
    )};

    return {
        getResource: function() { 
            return resource;
        },

        getCurrentUser: function() {
            return user;
        },

        setCurrentUser: function(userObj) {
            user = userObj;
        },

        loadUser: function(id) {
            user = resource.get(id);
        }
    }

  }]);

services.factory('AuthService', ['$resource', '$rootScope', '$http', '$location', 'AuthenticationService', 
  function ($resource, $rootScope, $http, $location, AuthenticationService) {
    var authFactory = {
        authData: undefined       
    };

    authFactory.getAuthData = function () {
        return this.authData;
    };

    authFactory.setAuthData = function (authData) {
        this.authData = {
            authId: authData.authId,
            authToken: authData.authToken,
            authPermission: authData.authPermission
        };
        // broadcast the event to all interested listeners
        $rootScope.$broadcast('authChanged');
    };

    authFactory.isAuthenticated = function () {
        return !angular.isUndefined(this.getAuthData());
    };

    authFactory.login = function (user, functionObj) {
        return AuthenticationService.login(user, functionObj);          
    };

    return authFactory;
}]);

services.factory('AuthenticationService', ['$resource',
  function($resource){
    return $resource('/myapp/rest/auth/', 
            {},
            {
              'login': { method: "POST" }
            }               
    );
  }]);          

services.factory('authHttpRequestInterceptor', ['$injector',  
 function ($injector) {
    var authHttpRequestInterceptor = {
        request: function ($request) {
            var authFactory = $injector.get('AuthService');
            if (authFactory.isAuthenticated()) {
                $request.headers['auth-id'] = authFactory.getAuthData().authId;
                $request.headers['auth-token'] = authFactory.getAuthData().authToken;
            }
            return $request;
        }
    };

    return authHttpRequestInterceptor;
}]);

контроллер:

controllers.controller('LoginCtrl', ['$scope', '$rootScope', 'AuthService', 'UserService', 
  function LoginCtrl($scope, $rootScope, AuthService, UserService) {
    $scope.login = function () {
        AuthService.login($scope.userInfo, function (data) {
            AuthService.setAuthData(data);
            // set user info on user service to reflect on all UI components
            UserService.setCurrentUser(data.user);
            $location.path('/home/');               
        });
    };

    $scope.isLoggedIn = function () {
        return AuthService.isAuthenticated();
    }

    $scope.user = UserService.getCurrentUser();         
}])

Ответ 3

Вы можете добавить данные пользовательского сеанса в index.html, используя некоторую библиотеку шаблонов, такую ​​как EJS.

Просто добавьте промежуточное ПО ejs:

var ejs = require('ejs');
// Register ejs as .html.
app.engine('.html', ejs.__express);

Ответ 4

Вы также можете использовать $localStorage, если вы хотите, чтобы логин сохранялся за пределами текущего сеанса. Я нашел, что эта библиотека была очень полезна для таких ситуаций. (https://github.com/grevory/angular-local-storage)