Angularjs使用UI-Router Resolve进行身份验证

Question

现在我有一个简单的角度设置，具有登录状态和云状态。 我想这样做只有在用户通过身份验证后才能运行云状态。 如果没有，它会将它们引导到登录状态。

到目前为止，我相信我有“解决”设置，如果解析失败，我将.run()函数设置为重定向到登录状态。

我只是在弄清楚如何进行authenticated: 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');
    });
});

Answer 1

解决问题没有那么复杂，请查看文档：

解决

您可以使用resolve为控制器提供自定义状态的内容或数据。 resolve是一个可选的依赖关系图，应该注入控制器。

如果这些依赖项中的任何一个是promise，它们将在实例化控制器并触发$ stateChangeSuccess事件之前被解析并转换为值。

...

例子：

在实例化控制器之前，必须解析下面解决的每个对象（通过deferred.resolve（），如果它们是一个promise）。 注意每个解析对象如何作为参数注入控制器。

$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，有类似的问答：

• ui路由器解决方案是找不到错误提供程序
• Angular-ui State - 多个视图未看到我的解析数据

如果我们想让DRY发挥作用，我们应该开始考虑国家层级（父/子/ ......）。 如下所述：

• 如何在ui-router中继承解析数据

我们可以为一些通用目的引入一些超级'root'状态：

$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'）提供解决（已经解决）。

如果我们要区分父和子分辨率，我们可以使用默认的解析名称...请在此查看详细信息：

• angular ui-route state parent和resolve（嵌套解析）

如果我们想要解决deny ，我们可以只询问$state provider和redirect。 最好的地方是某种改变状态的倾听者。 有一个详细的描述如何使用$rootScope.$on('$stateChangeStart',用于身份验证

困惑$ locationChangeSuccess和$ stateChangeStart