Angularjs 使用 UI-Router Resolve 进行身份验证
现在我有一个简单的角度设置，它有一个登录状态和一个云状态.我想让它只有在用户通过身份验证时才能运行云状态.如果没有，它将引导他们进入登录状态.
Right now I have a simple angular set up that has a login state and a cloud state. I want to make it so the cloud state can only be run if a user is authenticated. And if not, it will direct them to the login state.
到目前为止，我相信我已经设置了resolve"，并且设置了 .run() 函数以在解决失败时重定向到登录状态.
So far I believe I have the "resolve" setup and I have the .run() function set up to redirect to the login state if there the resolve fails.
我只是想不出如何让 authenticated:authenticated 获得我需要的东西.我知道我必须在某处创建一个 authenticated 函数，我只是不知道正确的方法.
I am just having trouble figuring out how I can make authenticated: authenticated get what I need. I know I have to make an authenticated function somewhere, I just don't know the correct way at going about it.
我是 angular 的新手，所以如果有人有任何建议，我将不胜感激.
I'm new to angular, so If anyone has any suggestions, I'd gladly appreciate them.
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 没有什么复杂的，查看文档:
There is nothing so complicated about resolve, check the documentation:
您可以使用 resolve 为您的控制器提供针对状态自定义的内容或数据.resolve 是一个可选的依赖映射，应该被注入到控制器中.
You can use resolve to provide your controller with content or data that is custom to the state. resolve is an optional map of dependencies which should be injected into the controller.
如果这些依赖项中的任何一个是承诺，它们将在控制器被实例化和 $stateChangeSuccess 事件被触发之前被解析并转换为一个值.
If any of these dependencies are promises, they will be resolved and converted to a value before the controller is instantiated and the $stateChangeSuccess event is fired.
...
示例:
在控制器实例化之前，下面的每个 resolve 对象都必须被解析(通过 deferred.resolve() 如果它们是一个 promise).注意每个解析对象是如何作为参数注入控制器的.
Each of the objects in resolve below must be resolved (via deferred.resolve() if they are a promise) before the controller is instantiated. Notice how each resolve object is injected as a parameter into the controller.
$stateProvider.state('myState', {
resolve:{
// Example using function with simple return value.
// Since it's not a promise, it resolves immediately.
simpleObj: function(){
return {value: 'simple!'};
},
...
如果你想要一些工作plunker，有类似的Q &答:
In case you want some working plunker, there is similar Q & A:
如果我们想让 DRY 发挥作用，我们应该开始考虑状态层次结构(父/子/...).正如此处所讨论的:
If we would like to get DRY into play, we should start to think about state hierarchy (parent / child / ...). As discussed here:
我们可以为一些通用目的引入一些超级'root'状态:
We can introduce some super 'root' state for some general purpose:
$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();
}
}
})
这意味着，每个子状态都将为祖父母('root')提供解析(已经解析).
That would mean, that each child state, will be provided with resolve (already being resolved) for grand-parent ('root').
如果我们想区分父解析和子解析，我们可以这样做，使用默认解析名称...在此处查看详细信息:
In case, we want to distinguish parent and child resolves we can do that, with default resolve names... Check the details here:
如果我们还想解决 deny，我们可以只要求 $state 提供者并重定向.最好的地方是某种更改状态侦听器.详细描述了如何使用 $rootScope.$on('$stateChangeStart', 进行身份验证
In case we would like also to solve deny, we can just ask for $state provider and redirect. The best place would be some kind of change state listener. There is a detailed description how to use $rootScope.$on('$stateChangeStart', for authentication purposes