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者和重定向.最好的地方是某种改变状态的倾听者.有一个详细的描述如何$rootScope.$on('$stateChangeStart',用于身份验证

困惑$ locationChangeSuccess和$ stateChangeStart