Отображение имени пользователя после входа в систему с угловым

Question

Отображение имени пользователя после входа в систему с угловым

0

Я играю с AngularJS и пытаюсь создать очень простое приложение для учебных целей, но у меня возникла проблема.

Я использую Kinvey BAAS. Итак, это то, что я пытаюсь сделать:

У меня есть login.controller.js, который выглядит так (пропуская регистрацию модуля и части конфигурации...):

'

.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);
                });
        }
    }
])

Идея проста. Используйте службу для входа пользователя в систему. Затем перенаправьте его на домашнюю страницу (/home).

Служба аутентификации выглядит так (users.js):

'

.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
        };
    }
]);

У меня также есть главный контроллер (main.controller.js). MainController обертывает весь контент с помощью div(), для привязки к сфере действия некоторого глобального материала... например, текущего пользователя.

'

.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);
                });
        }
    }
])

Теперь это index.html (где главный контроллер и ng-view):

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

И это home.html (где должно отображаться имя пользователя):

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

Дело в том, что когда пользователь регистрируется, я сохраняю файл cookie и перенаправляю зарегистрированного пользователя... но MainController не регистрирует зарегистрированного пользователя (он никогда не входит в часть if (users.isLogged())). Я должен обновиться, чтобы увидеть имя пользователя.

Любые рекомендации по решению этой проблемы будут удобны. Также будут высоко оценены качество кода и общие рекомендации по улучшению кода.

Заранее спасибо!

Борислав.

brslv 25 июль 2016, в 22:24

Источник

Теги:

javascript

angularjs

1 ответ

Ещё вопросы

Tracker1 · Answer 1 · 2016-07-25T17-40-00.000Z

2

users должны быть сервисом, а не фабрикой... служба создаст единый общий экземпляр, фабрика - это новый экземпляр для каждого контроллера.

Tracker1 25 июль 2016, в 17:40

0

Привет, @ Tracker1, спасибо за быстрый ответ. Я изменил .factory на .service, и у меня было улучшение. Но я думаю, что другая проблема присутствует сейчас. Когда я перенаправляю на маршрут / home, Angular действительно перенаправляет пользователя, но он как бы перезагружает только часть ng-view, а не весь html, и поэтому при перенаправлении он никогда не попадает в контроллер ng - MainController - который объявлен на div вне div с ng-view (вы можете увидеть это в первом посте). Любые предложения, как действовать?
brslv 25 июль 2016, в 20:56
0

Да, маршрутизатор может адаптировать только компоненты внутри адаптера маршрутизации ... если вам нужно это поддерживать, вы, вероятно, должны охватывать ваши компоненты по-разному, с маршрутизацией к вершине.
Tracker1 15 авг. 2016, в 02:36