在UI路由器使用决心用户进行身份验证 [英] Using resolve in ui-router to authenticate a user
问题描述
我有我的角度应用一个问题与问候的解析部分中的 UI路由器 。我试图present一个登录模式第一次用户点击网站。
在我app.config.js，我怎么注入我的'login服务：
角\r
.module（'愤怒'）\r
的.config（配置）;\r
\r
功能配置（$ stateProvider，$ urlRouterProvider）{\r
$ urlRouterProvider.otherwise（/仪表板）;\r
$ stateProvider\r
.STATE（'主'，{\r
网址：/仪表板，\r
templateUrl：应用程序/视图/ dashboard.html\r
控制器：'MainCtrl'，\r
数据：{PAGETITLE：RAGE，requireLogin：真正}，\r
解析：{\r
\r
// ***在哪里我注入'login服务？ ***\r
\r
AUTHUSER：功能（）{\r
返回loginService.loginModal（）。然后（功能（用户）{\r
$ rootScope.userID = user.userId;\r
userService.openUserSession（razorEnvJson）。然后（功能（数据）{\r
//分配一些范围瓦尔这里..\r
}）;\r
}）\r
}\r
}\r
}）\r
.STATE（'登陆'，{\r
网址：/登录\r
templateUrl：应用程序/视图/登录-view.html\r
控制器：'LoginCtrl\r
}）\r
} \r
login服务code：
（函数（）{\r
使用严格的;\r
\r
angular.module（'愤怒'）。服务（'login服务'，\r
['$ rootScope'，'$模式'，'的datacontext'，'userService'，登录]）;\r
\r
功能登录（$ rootScope，$莫代尔，DataContext的，userService）{\r
VAR modalInstance = NULL\r
\r
this.loginModal =功能（）{\r
modalInstance = $ modal.open（{\r
动画：真实，\r
templateUrl：应用程序/组件/登录/ login.html的，\r
控制器：'LoginCtrl作为登录'，\r
}）;\r
返回modalInstance.result.then（功能（用户）{\r
返回用户;\r
}）;\r
\r
};\r
\r
}\r
}）（）; \r
LoginCtrl控制器code：
（函数（）{\r
使用严格的;\r
\r
angular.module（'愤怒'）。控制器（'LoginCtrl'，\r
['$ rootScope'，'$范围，$ modalInstance'，'$ Q'，'的datacontext'，'userService'，验证]）;\r
\r
功能进行身份验证（$ rootScope，$范围，$ modalInstance，$ Q的datacontext，userService）{\r
\r
VAR登录=这一点;\r
\r
//确定，取消Click事件FROM MODAL！\r
$ scope.ok =功能（）{\r
//变种用户= userService.authenticateWebUser（）; // **** **** TBD\r
VAR用户= {用户名：login.userId，PSWD：login.pswd};\r
$ modalInstance.close（用户）;\r
};\r
$ scope.cancel =功能（）{\r
$ modalInstance.dismiss（'取消'）;\r
};\r
\r
}\r
}）（）; \r
我也尝试 $ rootScope。在$（'$ stateChangeStart'里面事件从过渡状态 app.js 主到登录，但我挂断了电话。
****我的新APP.CONFIG.JS code，9月18日****
下面是决心的正确用法：使用 UI路由器状态
功能配置（$ stateProvider，$ urlRouterProvider）{\r
$ urlRouterProvider.otherwise（/仪表板）;\r
$ stateProvider\r
.STATE（'主'，{\r
网址：/仪表板，\r
templateUrl：应用程序/视图/ dashboard.html\r
控制器：'MainCtrl'，\r
数据：{PAGETITLE：RAGE，requireLogin：真正}，\r
解析：{\r
AUTHUSER：['$ rootScope'，'login服务'，'userService'，函数（$ rootScope，login服务，userService）{\r
返回loginService.loginModal（）。然后（功能（用户）{\r
$ rootScope.userID = user.userId;\r
initSession（用户，$ rootScope，login服务，userService）;\r
}）\r
}]\r
}\r
}）\r
.STATE（'登陆'，{\r
网址：/登录\r
templateUrl：应用程序/视图/登录-view.html\r
控制器：'LoginCtrl\r
}）\r
}\r
功能initSession（用户，$ rootScope，login服务，userService）{\r
\r
userService.getInitParams（）。然后（功能（envJson）{\r
//一些code此处省略...\r
userService.openUserSession（envJson）。然后（功能（数据）{\r
变种的sessionID =数据。数据[0];\r
$ rootScope.rageSessionVars.sessionID =会话ID;\r
$ rootScope.rageSessionVars.userID = $ rootScope.userID; // ***如何暂停所有code，直到用户ID已指派？ ***\r
的console.log（会话ID =+会话ID）;\r
\r
$ rootScope.rageSessionVars.currDashboardName =默认;\r
}）;\r
\r
}）;\r
\r
} \r
* MainCtrl控制器code *
（函数（）{\r
使用严格的;\r
angular.module（'愤怒'）\r
.controller（'MainCtrl'，\r
['$ rootScope'，'$范围，$间隔，$窗口'，'$州'，'$的位置，widgetDefinitions'，\r
defaultWidgets'，'gadgetInitService'，主要]）;\r
\r
函数main（$ rootScope，$范围，$区间，$窗口，$状态，$位置，widgetDefinitions，defaultWidgets，gadgetInitService，AUTHUSER）{\r
VAR主要=这一点;\r
\r
**** AUTHUSER性从未定义！\r
\r
如果（$ scope.userID ==未定义）{/// *** NOTHING作品在这里！ ***\r
//$state.go('login'）;\r
//$location.url('index.html#/?login'）;\r
//返回;\r
}\r
\r
如果（$ scope.userID ==未定义）{\r
main.userName =用户的风险;\r
}\r
其他{\r
$ scope.main.userName = $ scope.userID;\r
}\r
}\r
}）（）; \r
编辑：
我看到你越来越糊涂就用'解决'的。
当你想一些数据传递到时，它正在运行的控制器应该被使用。不启动控制器之前运行的功能。
这是不是你真正想要在这种情况下。
这有点取决于你的身份验证方法，饼干/令牌等
这里是我会按照类似的方法。
-
有哪些处理以下登录服务
- 用户登录/注销
- 检查用户进行身份验证 -
在您的控制器致电您的服务检查，如果用户登录。
- 如果用户没有登录，则提示登录界面
- 如果用户登录，然后让控制器继续执行 -
我如何处理它，就是每当用户使那里的服务器返回401响应我打电话给我的login服务再次提示登录界面的未经授权的请求。
-
我使用authInterceptor的角度捕捉来自服务器的401响应。
下面是它一个很好的指南： http://onehungrymind.com/winning-http-interceptors- angularjs /
这允许你写你的未经授权的处理器在一个地方。
希望这使得它更清楚一点。
I'm having a issue in my Angular app with regards to the resolve section of the ui-router. I'm trying to present a login modal the first time a user hits the website.
In my app.config.js, how do I inject my '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 code:
(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 controller code:
(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');
};
}
})();
I've also attempted $rootScope.$on('$stateChangeStart' event inside app.js to transition the state from main to login, but that hangs up on me.
**** MY UPDATED APP.CONFIG.JS CODE, SEPT 18 ****
Here is the proper usage of resolve: using ui-router states.
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 controller code *
(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;
}
}
})();
Edit:
I see your getting confused on the use of 'Resolve'. It should be used when you want some data passed into the controller when it's being run. Not to run a function before initiating a controller.
This isn't what you really want in this situation.
It kinda depends on your authentication method, cookies/tokens etc. Here is a similar method that I would follow.
Have a Login service which handles the following -- Login/Logout of the user -- Checks if the user is authenticated
In your Controller call your service to check if the user is logged in. -- If the user is not logged in, then prompt login screen -- If the user is logged in, then let the controller continue execution
How I handle it, is whenever the user makes an UnAuthorised request where the server returns a 401 response I call my LoginService to prompt the login screen again.
I use an authInterceptor in Angular to catch any 401 response from the server. Here is a nice guide on it: http://onehungrymind.com/winning-http-interceptors-angularjs/
This allows you to write your Unauthorized handler in one place.
Hope that makes it a bit clearer.
这篇关于在UI路由器使用决心用户进行身份验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
