Question

我的Angular应用中遇到了resolve ui-router部分的问题。我试图在用户第一次访问网站时提出login modal。

在我的app.config.js中，如何注入'loginService'：

angular
    .module('rage')
    .config(config);

function config($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise("/dashboard");
    $stateProvider
        .state('main', {
            url: "/dashboard",
            templateUrl: "app/views/dashboard.html",
            controller: 'MainCtrl',
            data: { pageTitle: 'RAGE', requireLogin: true },
            resolve: {

                 // *** WHERE DO I INJECT 'loginService' ? ***

                authUser: function () {
                    return loginService.loginModal().then(function (user) {
                        $rootScope.userID = user.userId;
                        userService.openUserSession(razorEnvJson).then(function (data) {
                            // assign some scope vars here..
                        });
                    })
                }
            }
        })
        .state('login', {
            url: "/login",
            templateUrl: "app/views/login-view.html",
            controller: 'LoginCtrl'
        })
}

loginService代码：

(function () {
    'use strict';

    angular.module('rage').service('loginService',
        ['$rootScope', '$modal', 'datacontext', 'userService', login]);

    function login($rootScope, $modal, datacontext, userService) {
        var modalInstance = null
        
        this.loginModal = function(){
            modalInstance = $modal.open({
                animation: true,
                templateUrl: 'app/components/login/login.html',
                controller: 'LoginCtrl as login',      
            });            
            return modalInstance.result.then(function (user) {                
                return user;
            });
            
        };

    }
})();

LoginCtrl控制器代码：

(function () {
    'use strict';

    angular.module('rage').controller('LoginCtrl',
        ['$rootScope', '$scope', '$modalInstance', '$q', 'datacontext', 'userService', authenticate]);

    function authenticate($rootScope, $scope, $modalInstance, $q, datacontext, userService) {

        var login = this;

        // OK,CANCEL CLICK EVENTS FROM MODAL !!!
        $scope.ok = function () {
            //  var user = userService.authenticateWebUser();  // **** TBD ****              
            var user = {userId: login.userId, pswd: login.pswd};
            $modalInstance.close(user);
        };
        $scope.cancel = function () {
            $modalInstance.dismiss('cancel');
        };

    }
})();

我还尝试$rootScope.$on('$stateChangeStart'内的app.js个事件将状态从main转换为login，但这依赖于我。

**** MY UPDATED APP.CONFIG.JS CODE，SEPT 18 ****

以下是使用resolve:州的ui-router的正确用法。

function config($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/dashboard");
$stateProvider
.state('main', {
    url: "/dashboard",
    templateUrl: "app/views/dashboard.html",
    controller: 'MainCtrl',
    data: { pageTitle: 'RAGE', requireLogin: true },
    resolve: {
	authUser: ['$rootScope', 'loginService', 'userService', function ($rootScope, loginService, userService) {
	    return loginService.loginModal().then(function (user) {
		$rootScope.userID = user.userId;
		initSession(user, $rootScope, loginService, userService);	
	    })
	}]
    }
})
.state('login', {
    url: "/login",
    templateUrl: "app/views/login-view.html",
    controller: 'LoginCtrl'
})
}
function initSession(user, $rootScope, loginService, userService) {

    userService.getInitParams().then(function (envJson) {
        // some code omitted here...
	userService.openUserSession(envJson).then(function (data) {
	    var sessionID = data.data[0];
	    $rootScope.rageSessionVars.sessionID = sessionID;
	    $rootScope.rageSessionVars.userID = $rootScope.userID; // *** HOW TO SUSPEND ALL CODE UNTIL userID IS ASSIGNED ??? ***
	    console.log("sessionID = " + sessionID);

	    $rootScope.rageSessionVars.currDashboardName = "Default";
	});
           
    });

}

* MainCtrl控制器代码*

(function () {
    'use strict';
    angular.module('rage')
        .controller('MainCtrl',
            ['$rootScope', '$scope', '$interval', '$window', '$state', '$location', 'widgetDefinitions',
            'defaultWidgets', 'gadgetInitService', main]);

    function main($rootScope, $scope, $interval, $window, $state, $location, widgetDefinitions, defaultWidgets, gadgetInitService, authUser) {
        var main = this;
           
        **** authUser IS NEVER DEFINED !!!

        if ($scope.userID == undefined) {   /// *** NOTHING WORKS HERE !!! ***
            //$state.go('login');
            //$location.url('index.html#/?login');
            //return ;
        }

        if ($scope.userID == undefined) {
            main.userName = "risk user";
        }
        else {
            $scope.main.userName = $scope.userID;   
        }
    }
})();

Answer 1

编辑：

我看到你对'Resolve'的使用感到困惑。当您希望在运行时将某些数据传递到控制器时，应该使用它。在启动控制器之前不要运行函数。

在这种情况下，这不是你真正想要的。

这取决于您的身份验证方法，Cookie /令牌等。这是我将遵循的类似方法。

拥有处理以下内容的登录服务 - 登录/注销用户 - 检查用户是否已通过身份验证
在您的Controller中调用您的服务以检查用户是否已登录。 - 如果用户未登录，则提示登录屏幕 - 如果用户已登录，则让控制器继续执行
我是如何处理的，无论何时用户发出未经授权的请求，服务器返回401响应，我都会调用我的LoginService来再次提示登录屏幕。
我在Angular中使用authInterceptor来捕获来自服务器的任何401响应。这是一个很好的指南：http://onehungrymind.com/winning-http-interceptors-angularjs/

这允许您在一个地方编写Unauthorized处理程序。

希望能让它更清晰一点。

使用ui-router中的resolve对用户进行身份验证

1 个答案: