Javascript Angularjs使用UI路由器解析进行身份验证
现在我有一个简单的角度设置,它有一个登录状态和一个云状态。我想让云状态只有在用户经过身份验证的情况下才能运行。如果没有,它将引导他们进入登录状态 到目前为止,我相信我已经有了“解析”设置,并且设置了Javascript Angularjs使用UI路由器解析进行身份验证,javascript,angularjs,authentication,angular-ui-router,Javascript,Angularjs,Authentication,Angular Ui Router,现在我有一个简单的角度设置,它有一个登录状态和一个云状态。我想让云状态只有在用户经过身份验证的情况下才能运行。如果没有,它将引导他们进入登录状态 到目前为止,我相信我已经有了“解析”设置,并且设置了.run()函数,以便在解析失败时重定向到登录状态 我只是不知道如何才能使authenticated:authenticated得到我需要的东西。我知道我必须在某个地方做一个认证的函数,我只是不知道正确的方法 我是个新手,所以如果有人有任何建议,我将非常感谢 var routerApp = angul
.run()
函数,以便在解析失败时重定向到登录状态
我只是不知道如何才能使authenticated:authenticated
得到我需要的东西。我知道我必须在某个地方做一个认证的函数,我只是不知道正确的方法
我是个新手,所以如果有人有任何建议,我将非常感谢
var routerApp = angular.module('app', ['ui.router'])
.config(function($stateProvider, $urlRouterProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$urlRouterProvider.otherwise('/cloud');
$stateProvider
.state('login', {
url: '/login',
templateUrl: "pages/templates/login.html"
})
.state('cloud', {
url: '/cloud',
templateUrl: "pages/templates/account.html",
resolve: { authenticated: authenticated }
})
})
.run(function ($rootScope, $state, $log) {
$rootScope.$on('$stateChangeError', function () {
$state.go('login');
});
});
解决问题没有那么复杂,请查看文档:
您可以使用“解析”为控制器提供状态自定义的内容或数据。resolve是一个可选的依赖关系映射,应该将其注入控制器
如果这些依赖项中有任何一个是承诺,那么在实例化控制器并触发$stateChangeSuccess事件之前,它们将被解析并转换为一个值
示例:
在实例化控制器之前,必须解析下面resolve中的每个对象(如果它们是承诺,则通过deferred.resolve())。请注意每个resolve对象是如何作为参数注入控制器的
如果你想要一些有用的东西,有类似的问答:
如果我们想干下去,我们应该开始考虑状态层次结构(parent/child/…)。正如这里所讨论的:
我们可以为一些通用目的引入一些超级“根”
状态:
$stateProvider
.state('root', {
abstract : true,
// see controller def below
controller : 'RootCtrl',
// this is template, discussed below - very important
template: '<div ui-view></div>',
// resolve used only once, but for available for all child states
resolve: {
user: function (authService) {
return authService.getUserDetails();
}
}
})
$stateProvider
.state('根'{
摘要:没错,
//请参阅下面的控制器def
控制器:“RootCtrl”,
//这是下面讨论的模板-非常重要
模板:“”,
//解析仅使用一次,但可用于所有子状态
决心:{
用户:函数(authService){
返回authService.getUserDetails();
}
}
})
这意味着,将为每个子状态提供祖父母(“根”)的解析(已解析)
在这种情况下,我们想要区分父解析和子解析,我们可以这样做,使用默认的解析名称。。。请在此处查看详细信息:
如果我们还想解决拒绝,我们可以请求$state
提供程序并重定向。最好的地方是某种改变状态的监听器。详细说明了如何使用(“$stateChangeStart”,
上的$rootScope.$on进行身份验证
你可以将你的函数放在同一个解析块中,或者引用另一个服务。这有点密集,但确实会告诉你正确的方法:@cerd这有点超出我的理解范围。感谢链接tho,这是我能够访问的唯一例子。谢谢你的长时间响应。我很感激。如果还有更多的话在一个需要解决的州,我不想一次又一次地重复这个功能。我的问题或多或少是如何不必重复我自己,如何拒绝允诺。我用更多的细节扩展了我的答案,并包括了其他带有清晰有效的掠夺物的参考资料。我想说,这是实现“理解”的最好方式非常棒的UI路由器。希望能有所帮助;)@bryan您可以创建一个父状态以及所有需要身份验证的状态作为该状态的子状态。这样,您只需将解析添加到父状态。
$stateProvider
.state('root', {
abstract : true,
// see controller def below
controller : 'RootCtrl',
// this is template, discussed below - very important
template: '<div ui-view></div>',
// resolve used only once, but for available for all child states
resolve: {
user: function (authService) {
return authService.getUserDetails();
}
}
})