Javascript 使用angular登录后显示用户名

我在玩AngularJS，试图构建一个非常简单的应用程序来进行学习，但我遇到了一个问题

我用的是Kinvey BAAS。这就是我想做的：

我有一个login.controller.js，看起来像这样（跳过模块注册和配置部分…）：

`

这个想法很简单。使用服务登录用户。然后，将他重定向到主页（/home）

身份验证服务如下所示（users.js）：

`

我还有一个主控制器（main.controller.js）。MainController用div（）包装整个内容，以便将一些全局内容绑定到范围中，比如当前登录的用户

`

现在，这是index.html（其中包含主控制器和ng视图）：

切换导航

这是home.html（其中应显示用户名）：

你好，{{user.username}

问题是，当用户登录时，我保存一个cookie并重定向登录的用户……但是MainController不注册登录的用户（它从不进入if（users.isLogged（））部分）。我必须刷新才能看到用户的用户名

任何关于如何解决这个问题的指导都很方便。此外，代码质量和整体代码改进建议也将受到高度赞赏

提前谢谢

---

Borislav.

用户

应该是服务，而不是工厂。。。服务将创建单个共享实例，工厂是每个控制器的新实例。

用户

应该是服务，而不是工厂。。。服务将创建单个共享实例，工厂是每个控制器的新实例。

Hey，@Tracker1，感谢您的快速回复。我确实把工厂改成了服务，我有了改进。但我认为现在还有另一个问题。当我重定向到/home路由时，Angular确实重定向了用户，但它只是重新加载了ng视图部分，而不是整个html，这就是为什么在重定向时它从未命中ng控制器MainController，它是在带有ng视图的div外部的div上声明的（您可以在第一篇文章中看到）。有什么建议吗？是的，路由器只能适应路由适配器内部的组件。。。如果您需要支持这一点，您可能应该以不同的方式包含您的组件，将路由指向顶部。嘿，@Tracker1，谢谢您的快速回复。我确实把工厂改成了服务，我有了改进。但我认为现在还有另一个问题。当我重定向到/home路由时，Angular确实重定向了用户，但它只是重新加载了ng视图部分，而不是整个html，这就是为什么在重定向时它从未命中ng控制器MainController，它是在带有ng视图的div外部的div上声明的（您可以在第一篇文章中看到）。有什么建议吗？是的，路由器只能适应路由适配器内部的组件。。。如果您需要支持这一点，那么您可能应该以不同的方式包含您的组件，并朝顶部布线。

.controller('LoginController', [
    '$scope',
    '$location',
    'users',

    function ($scope, $rootScope, $location, users) {
        $scope.login = function login() {
            users.login($scope.user)
                .then(function (loggedInUser) {
                    $location.path('/home');
                    console.log(loggedInUser);
                }, function (error) {
                    console.log(error);
                });
        }
    }
])

.factory('users', [
    '$http',
    '$q',
    '$cookies',
    '$location',
    'BASE_URL',
    'APP_KEY',
    'APP_SECRET',

    function ($http, $q, $cookies, $location, BASE_URL, APP_KEY, APP_SECRET) {

        var user = undefined;

        function login(user) {
            var deferred = $q.defer();

            // Get the user information.
            $http.post(BASE_URL + 'user/' + APP_KEY + '/login', {
                username: user.username,
                password: user.password
            })
                .then(function (response) {
                    _preserveUserData(response.data);
                    deferred.resolve(response);
                }, function (error) {
                    deferred.reject(error);
                });


            return deferred.promise;
        }

        function _preserveUserData(data) {
            var authToken = data._kmd.authtoken;

            $cookies.put('authToken', authToken);

            user = data;
        }

        function isLogged() {
            if !! (user || $cookies.get('authToken'));
        }

        function getLoggedUser() {
            var deferred = $q.defer();

            if (user) {
                deferred.resolve(user);
            } else if ($cookies.get('authToken')) {
                var authToken = $cookies.get('authToken');
                $http.defaults.headers.common.Authorization = 'Kinvey ' + authToken;

                $http.get(BASE_URL + 'user/' + APP_KEY + '/_me')
                    .then(function (response) {
                        user = response.data;

                        deferred.resolve(response);
                    }, function (error) {
                        deferred.reject(error);
                    });
            } else {
                deferred.reject('No logged user.');
            }

            return deferred.promise;
        }

        return {
            login: login,
            isLogged: isLogged,
            getLoggedUser: getLoggedUser
        };
    }
]);

.controller('MainController', [
    'APP_TITLE',
    '$scope',
    'users',

    function (APP_TITLE, $scope, users) {
        // A place to store some more-global stuff.
        $scope.appTitle = APP_TITLE;
        $scope.user = undefined;

        if (users.isLogged()) {
            users.getLoggedUser()
                .then(function (loggedUser) {
                    $scope.user = loggedUser.data;
                }, function (error) {
                    console.log(error);
                });
        }
    }
])

<body>
    <div ng-controller="MainController" ng-cloak>

        <nav class="navbar navbar-default navbar-fixed-top">
            <div class="container-fluid">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#!/">{{appTitle}}</a>
                </div>

                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav">
                        <li><a href="#!/home">Home</a></li>
                        <li><a href="#!/favorites">Favorites</a></li>
                        <li><a href="#!/users">Users</a></li>
                    </ul>

                    <ul class="nav navbar-nav navbar-right" ng-if="user">
                        <li class="dropdown">
                            <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">{{user.username}}<span class="caret"></span></a>
                            <ul class="dropdown-menu">
                                <li><a href="javascript:;">Links</a></li>
                                <li><a href="javascript:;">Edit Profile</a></li>
                                <li role="separator" class="divider"></li>
                                <li><a href="javascript:;">Logout</a></li>
                            </ul>
                        </li>
                    </ul>
                </div><!-- /.navbar-collapse -->
            </div><!-- /.container-fluid -->
        </nav>
        <!--[if lt IE 7]>
        <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->

        <div ng-view>

        </div>
    </div>

<div class="container">
    <h2>Hello, <span ng-if="user">{{user.username}}</span></h2>
</div>