Question

我有一个用户工厂，当用户登录系统时，我会填充一个名为userProperties的对象。然后调用名为login（）的函数，该函数调用名为set（）的函数“设置用户”，或填充userProperties对象。

user.factory.js

(function () {
    'use strict';

    angular
        .module('app')
        .factory('user', user);

    /* @ngInject */
    function user($http, authToken, $q, $state) {

        var userProperties = {};

        return {
            login: login,
            logout: logout,
            set: set,
            isSet: isSet,
            get: get,
            isLoggedIn: isLoggedIn
        };

        function login(email, password) {
            return $http.post('/api/login', {
                email: email,
                password: password
            }).then(function (response) {
                authToken.setToken(response.data.jwt);
                set(response.data.user);
                return response;
            });
        }

        function logout() {
            authToken.setToken();
            $state.go('login');
        }

        function set(data) {
            userProperties = data;
        }

        function get() {
            return userProperties;
        }           

        function isSet() {
            return !isEmpty(userProperties) ? true : false;
        }

        function isLoggedIn() {
            return authToken.getToken() ? true : false;
        }

        function isEmpty(obj) {
            for (var prop in obj) {
                if (obj.hasOwnProperty(prop)) { return false; }
            }
            return true;
        }       

    }

}());

然后我可以在整个网站的控制器中使用此代码。例如，在页眉控制器，家庭控制器，配置文件控制器等内部。

但是，如果我不手动登录，但刷新网站，那么我有一个问题，因为我没有填写userProperties对象，就像我有人登录时那样。所以当人们点击时我需要检查刷新按钮。

类似于下面的代码。我尝试在应用程序中的所有其他内容之前在运行块中运行此代码，但仍然没有出现在控制器中，因为它是异步的。

if (user.isLoggedIn() && !user.isSet()) {
    $http.get('/api/user/0') // id: 0 is the id of the logged in user
        .then(function (response) {
            user.set(response.data);
        });
}

但问题在于，即使我这样做，我也无法在控制器中使用用户工厂并访问已填充的userProperties对象，因为它是异步的。

Profile.controller.js

(function () {
    'use strict';

    angular
        .module('app')
        .controller('Profile', Profile);

    /* @ngInject */
    function Profile($scope, user) {
        $scope.user = user.get();
        console.log($scope.user);
    }

}());

Profile控制器上面的代码将一个空对象输出到控制台。

我的另一种方法是在ui-router中执行类似的操作，在Profile控制器之前解析它并在此处设置用户。但是我必须在我需要用户的任何地方这样做。在Home控制器，Header控制器等中。

.state('profile', {
    url: '/user/:id',
    templateUrl: 'app/profile/profile.tpl.html',
    resolve: {
        userResolve: function ($http, $q, user) {
            return $http.get('/api/user/0')
                .then(function (response) {
                    user.set(response.data);
                });
        }
    },
    controller: 'Profile'
});

为了做到这一点我应该怎么做并在整个网站上提供？或者我是否需要在每个州之前解决？

AngularJS填充可在整个网站

0 个答案: