Angular UI路由器:我应该在哪里改变状态?控制器吗?服务?事件监听器

Angular UI router: where should I be changing state? Controllers? Services? Event listeners?

本文关键字：控制器 服务 监听器 事件 状态 改变 路由器 UI 我应该 在哪里 Angular      更新时间：2023-09-26

这是一个最佳实践问题。

我有一个angular应用，里面有一些嵌套的状态和视图。

当我的用户点击"登出"按钮时，它被附加到一个控制器函数，然后控制器函数调用认证服务中的函数。然后，身份验证服务向服务器发出调用，并且需要将用户重定向到登录页面。

我有一些想法，实际的"state.go('login')"应该在哪里。

(1)服务向服务器发起调用，当调用结束时，服务将状态更改为login。

这感觉很糟糕，因为在我看来，服务应该是一些提供数据或功能的静态实体，并且与应用程序的其余部分分开。

(2)控制器调用认证服务后状态变为登录。

这个看起来好多了。无论如何，控制器已经附加到应用程序和标记上了。

(3)服务发出一个自定义动作，我在应用常量中定义，比如EVENTS。logout_success，然后在根作用域上侦听该事件并执行状态。进入事件监听器

不确定这个，它使事情更复杂，但看起来相当干净。

任何想法吗?

    Change your State in the Controllers. Refer to following example ...
----------------------------------------------------------------------------
# config.js
(function() {
    'use strict';
    angular
        .module('app.foo.authentication')
        .config(moduleConfig);
    /* @ngInject */
    function moduleConfig($translatePartialLoaderProvider, $stateProvider) {
        $translatePartialLoaderProvider.addPart('app/foo/authentication');
        $stateProvider
        .state('authentication.logout', {
            url: '/logout',
            templateUrl: 'app/foo/authentication/logout/logout.tmpl.html',
            controller: 'LogoutController',
            controllerAs: 'vm'
        });
    }
})();
    -------------------------------------------------------------------------
    # logout.controller.js
    (function() {
        'use strict';
        angular
            .module('app.foo.authentication')
            .controller('LogoutController', LogoutController);
        /* @ngInject */
        function LogoutController(
            $scope,
            $state,
            $mdToast,
            $filter,
            $http,
            $window,
            triSettings,
            session) {
            var vm = this;
            vm.triSettings = triSettings;
            vm.backToLogin = backToLogin;
            vm.loading = false;
            function backToLogin () {
                vm.loading = true;
                session.end();
                $window.location.reload();
                $state.go('authentication.login');
            }
        }
    })();
    ----------------------------------------------------------------------------
    # logout.html
    <div layout="row" flex layout-padding layout-fill layout-align="center center">
        <div class="logout-card" flex="40" flex-lg="50" flex-md="70" flex-xs="100">
            <md-card>
                <md-toolbar class="padding-20 logout-card-header">
                    <div layout="row" layout-align="center center">
                        <img ng-src="{{::vm.logo}}" alt="{{vm.name}}">
                    </div>
                    <div layout="row" layout-align="center center">
                        <h1 class="md-headline" translate>LOGOUT.TITLE</h1>
                    </div>
                </md-toolbar>
                <md-content class="md-padding">
                    <p translate>LOGOUT.MESSAGES.SUCCESS</p>
                    <div layout="row" layout-align="center center">
                        <md-progress-circular ng-show="vm.loading" md-mode="indeterminate"></md-progress-circular>
                    </div>
                    <form name="logout">
                        <md-button
                            class="md-raised md-primary full-width margin-left-0 margin-right-0 margin-top-10 margin-bottom-10"
                            ng-click="vm.backToLogin()"
                            translate="LOGOUT"
                            aria-label="{{'LOGOUT' | translate}}">
                        </md-button>
                    </form>
                </md-content>
            </md-card>
        </div>
    </div>

我同意你的想法，如果这是登出的唯一流程，我宁愿选择2而不是3。

如果有不同的退出方式(例如强制退出)，选项3对我来说更有意义。

相关文章：