AngularJS用户界面-路由器登录认证

AngularJS用户界面-路由器登录认证

我是AngularJS的新手,我对如何在以下场景中使用角-“UI-路由器”感到有点困惑:

我正在构建一个由两个部分组成的Web应用程序。第一部分是主页及其登录和注册视图,第二部分是仪表板(成功登录后)。

我创造了一个index.html对于家庭部分,它的角度应用程序和ui-router要处理的配置/login/signup视图,还有另一个文件dashboard.html用于仪表板部分及其应用程序和ui-router配置来处理许多子视图。

现在我完成了仪表板部分,不知道如何将这两个部分与它们不同的角度应用程序结合起来。我如何告诉家庭应用程序重定向到仪表板应用程序?


Helenr
浏览 1086回答 3
3回答

达令说

我正在制作一个更好的演示,并将其中的一些服务清理成一个可用的模块,但下面是我想出的。这是一个复杂的过程,以解决一些注意事项,所以坚持住。你需要把它分解成几块。看看这个.首先,您需要一个服务来存储用户的身份。我称之为principal..它可以被检查以查看用户是否登录,并且根据请求,它可以解析一个表示有关用户身份的基本信息的对象。这可以是您需要的任何东西,但是基本要素是显示名称、用户名、可能是电子邮件,以及用户所属的角色(如果这适用于您的应用程序)。主体还具有执行角色检查的方法。.factory('principal',&nbsp;['$q',&nbsp;'$http',&nbsp;'$timeout', &nbsp;&nbsp;function($q,&nbsp;$http,&nbsp;$timeout)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;_identity&nbsp;=&nbsp;undefined, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_authenticated&nbsp;=&nbsp;false; &nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;isIdentityResolved:&nbsp;function()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;angular.isDefined(_identity); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;isAuthenticated:&nbsp;function()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;_authenticated; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;isInRole:&nbsp;function(role)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(!_authenticated&nbsp;||&nbsp;!_identity.roles)&nbsp;return&nbsp;false; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;_identity.roles.indexOf(role)&nbsp;!=&nbsp;-1; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;isInAnyRole:&nbsp;function(roles)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(!_authenticated&nbsp;||&nbsp;!_identity.roles)&nbsp;return&nbsp;false; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for&nbsp;(var&nbsp;i&nbsp;=&nbsp;0;&nbsp;i&nbsp;<&nbsp;roles.length;&nbsp;i++)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(this.isInRole(roles[i]))&nbsp;return&nbsp;true; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;false; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;authenticate:&nbsp;function(identity)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_identity&nbsp;=&nbsp;identity; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_authenticated&nbsp;=&nbsp;identity&nbsp;!=&nbsp;null; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;identity:&nbsp;function(force)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;deferred&nbsp;=&nbsp;$q.defer(); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(force&nbsp;===&nbsp;true)&nbsp;_identity&nbsp;=&nbsp;undefined; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;check&nbsp;and&nbsp;see&nbsp;if&nbsp;we&nbsp;have&nbsp;retrieved&nbsp;the&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;identity&nbsp;data&nbsp;from&nbsp;the&nbsp;server.&nbsp;if&nbsp;we&nbsp;have,&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;reuse&nbsp;it&nbsp;by&nbsp;immediately&nbsp;resolving &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(angular.isDefined(_identity))&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;deferred.resolve(_identity); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;deferred.promise; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;otherwise,&nbsp;retrieve&nbsp;the&nbsp;identity&nbsp;data&nbsp;from&nbsp;the &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;server,&nbsp;update&nbsp;the&nbsp;identity&nbsp;object,&nbsp;and&nbsp;then&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;resolve. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$http.get('/svc/account/identity',&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{&nbsp;ignoreErrors:&nbsp;true&nbsp;}) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.success(function(data)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_identity&nbsp;=&nbsp;data; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_authenticated&nbsp;=&nbsp;true; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;deferred.resolve(_identity); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.error(function&nbsp;()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_identity&nbsp;=&nbsp;null; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_authenticated&nbsp;=&nbsp;false; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;deferred.resolve(_identity); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;for&nbsp;the&nbsp;sake&nbsp;of&nbsp;the&nbsp;demo,&nbsp;fake&nbsp;the&nbsp;lookup &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;by&nbsp;using&nbsp;a&nbsp;timeout&nbsp;to&nbsp;create&nbsp;a&nbsp;valid &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;fake&nbsp;identity.&nbsp;in&nbsp;reality,&nbsp;&nbsp;you'll&nbsp;want&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;something&nbsp;more&nbsp;like&nbsp;the&nbsp;$http&nbsp;request &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;commented&nbsp;out&nbsp;above.&nbsp;in&nbsp;this&nbsp;example,&nbsp;we&nbsp;fake&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;looking&nbsp;up&nbsp;to&nbsp;find&nbsp;the&nbsp;user&nbsp;is &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;not&nbsp;logged&nbsp;in &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;self&nbsp;=&nbsp;this; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$timeout(function()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;self.authenticate(null); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;deferred.resolve(_identity); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},&nbsp;1000); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;deferred.promise; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;}; &nbsp;&nbsp;}])其次,您需要一个服务来检查用户想要进入的状态,确保他们已经登录(如果必要的话;对于签名、密码重置等等来说不需要),然后进行角色检查(如果您的应用程序需要这样的话)。如果未对其进行身份验证,请将其发送到登录页。如果它们经过身份验证,但未通过角色检查,则将它们发送到拒绝访问的页面。我叫这个服务authorization..factory('authorization',&nbsp;['$rootScope',&nbsp;'$state',&nbsp;'principal', &nbsp;&nbsp;function($rootScope,&nbsp;$state,&nbsp;principal)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;authorize:&nbsp;function()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;principal.identity() &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.then(function()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;isAuthenticated&nbsp;=&nbsp;principal.isAuthenticated(); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;($rootScope.toState.data.roles&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&&&nbsp;$rootScope.toState&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.data.roles.length&nbsp;>&nbsp;0&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&&&nbsp;!principal.isInAnyRole( &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$rootScope.toState.data.roles)) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(isAuthenticated)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;user&nbsp;is&nbsp;signed&nbsp;in&nbsp;but&nbsp;not &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;authorized&nbsp;for&nbsp;desired&nbsp;state &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$state.go('accessdenied'); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;else&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;user&nbsp;is&nbsp;not&nbsp;authenticated.&nbsp;Stow &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;the&nbsp;state&nbsp;they&nbsp;wanted&nbsp;before&nbsp;you &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;send&nbsp;them&nbsp;to&nbsp;the&nbsp;sign-in&nbsp;state,&nbsp;so &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;you&nbsp;can&nbsp;return&nbsp;them&nbsp;when&nbsp;you're&nbsp;done &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$rootScope.returnToState&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;=&nbsp;$rootScope.toState; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$rootScope.returnToStateParams&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;=&nbsp;$rootScope.toStateParams; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;now,&nbsp;send&nbsp;them&nbsp;to&nbsp;the&nbsp;signin&nbsp;state &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;so&nbsp;they&nbsp;can&nbsp;log&nbsp;in &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$state.go('signin'); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;}; &nbsp;&nbsp;}])现在你要做的就是倾听ui-router氏$stateChangeStart..这使您有机会检查当前状态、他们希望进入的状态,并插入授权检查。如果失败,您可以取消路由转换,或者更改为其他路由。.run(['$rootScope',&nbsp;'$state',&nbsp;'$stateParams',&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'authorization',&nbsp;'principal', &nbsp;&nbsp;&nbsp;&nbsp;function($rootScope,&nbsp;$state,&nbsp;$stateParams,&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;authorization,&nbsp;principal){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$rootScope.$on('$stateChangeStart',&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function(event,&nbsp;toState,&nbsp;toStateParams) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;track&nbsp;the&nbsp;state&nbsp;the&nbsp;user&nbsp;wants&nbsp;to&nbsp;go&nbsp;to;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;authorization&nbsp;service&nbsp;needs&nbsp;this &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$rootScope.toState&nbsp;=&nbsp;toState; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$rootScope.toStateParams&nbsp;=&nbsp;toStateParams; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;if&nbsp;the&nbsp;principal&nbsp;is&nbsp;resolved,&nbsp;do&nbsp;an&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;authorization&nbsp;check&nbsp;immediately.&nbsp;otherwise, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;it'll&nbsp;be&nbsp;done&nbsp;when&nbsp;the&nbsp;state&nbsp;it&nbsp;resolved. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(principal.isIdentityResolved())&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;authorization.authorize(); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}); &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;]);跟踪用户身份的棘手部分是,如果您已经通过了身份验证,就查找它(例如,您在上一次会话之后访问该页面,并在cookie中保存了一个auth令牌,或者您可能很难刷新页面,或者从链接中拖到URL上)。因为这条路ui-router有效,您需要在检查之前完成一次身份解析。您可以使用resolve选项在状态配置中。对于所有状态继承的站点,我有一个父状态,它强制在发生其他任何事情之前解析主体。$stateProvider.state('site',&nbsp;{ &nbsp;&nbsp;'abstract':&nbsp;true, &nbsp;&nbsp;resolve:&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;authorize:&nbsp;['authorization', &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function(authorization)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;authorization.authorize(); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;] &nbsp;&nbsp;}, &nbsp;&nbsp;template:&nbsp;'<div&nbsp;ui-view&nbsp;/>'})还有另一个问题.。resolve只接到一次电话。一旦您的身份查找承诺完成,它将不再运行解决委托。因此,我们必须在两个地方进行您的检查:一是按照您的身份承诺进行检查,二是在resolve,这将涵盖您的应用程序第一次加载,并在其中一次加载。$stateChangeStart如果决议已经完成,这将涵盖您在各州之间导航的任何时间。好吧,到目前为止我们做了什么?我们检查应用程序何时加载,如果用户登录。我们跟踪有关登录用户的信息。我们将它们重定向到状态签名,以获取需要用户登录的状态。如果它们没有访问权限,我们会将它们重定向到拒绝访问的状态。如果需要用户登录,我们有一种机制可以将用户重定向回他们请求的原始状态。我们可以签出一个用户(需要与管理您的auth票证的任何客户端或服务器代码进行协调)。我们别每次用户重新加载浏览器或删除链接时,都需要将用户送回登录页面。我们从这里去哪儿?你可以把你的州组织成需要登录的区域。您可以通过添加data带着roles对于这些状态(如果要使用继承,则为它们的父状态)。在这里,我们将资源限制为管理员:.state('restricted',&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;parent:&nbsp;'site', &nbsp;&nbsp;&nbsp;&nbsp;url:&nbsp;'/restricted', &nbsp;&nbsp;&nbsp;&nbsp;data:&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;roles:&nbsp;['Admin'] &nbsp;&nbsp;&nbsp;&nbsp;}, &nbsp;&nbsp;&nbsp;&nbsp;views:&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'content@':&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;templateUrl:&nbsp;'restricted.html' &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;})现在,您可以按州控制用户可以访问的路由。还有其他担心吗?可能只根据它们是否登录来更改视图的一部分?没问题。使用principal.isAuthenticated()甚至principal.isInRole()使用多种方法中的任何一种,您都可以有条件地显示模板或元素。首先,注射principal放入控制器或任何东西中,并将其固定在作用域上,以便您可以轻松地在视图中使用它:.scope('HomeCtrl',&nbsp;['$scope',&nbsp;'principal',&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;function($scope,&nbsp;principal){ &nbsp;&nbsp;$scope.principal&nbsp;=&nbsp;principal;});显示或隐藏元素:<div&nbsp;ng-show="principal.isAuthenticated()"> &nbsp;&nbsp;&nbsp;I'm&nbsp;logged&nbsp;in</div><div&nbsp;ng-hide="principal.isAuthenticated()"> &nbsp;&nbsp;I'm&nbsp;not&nbsp;logged&nbsp;in</div>等等。无论如何,在您的示例应用程序中,您将有一个主页状态,允许未经身份验证的用户来访。它们可以有登录或注册状态的链接,也可以将这些表单内置到页面中。任何适合你的。仪表板页都可以从一个要求用户登录的状态继承,例如,它是一个User角色成员。我们讨论过的所有授权内容都是从那里流出来的。
打开App,查看更多内容
随时随地看视频慕课网APP