使用UI-路由器解析验证Angularjs [英] Angularjs using UI-Router Resolve for Authentication

问题描述

现在我有了一个登录状态和云州一个简单的角度设立。我想使它所以云州只能运行，如果用户进行身份验证。如果没有的话，它会引导他们到登录状态。

到目前为止，我相信我有这个解析的设置和我有 .RUN（）功能设置是否有决心不重定向到登录状态。

我只是遇到了问题搞清楚如何才能让验证：验证得到我所需要的。我知道我不得不作出一个验证函数的地方，我只是不知道绕了正确的方法。

我是新来的角，所以如果任何人有任何建议，我会很乐意AP preciate他们。

  VAR routerApp = angular.module（'应用'，['ui.router']）的.config（函数（$ stateProvider，$ urlRouterProvider，$ locationProvider）{    $ locationProvider.html5Mode（真）;
    $ urlRouterProvider.otherwise（'/云'）;    $ stateProvider        .STATE（'登陆'，{
            网址：'/登录'，
            templateUrl：网页/模板/ login.html的
        }）        .STATE（'云'，{
            网址：'/云，
            templateUrl：网页/模板/ account.html
            解决：{认证：认证}
        }）}）
.RUN（函数（$ rootScope，$状态，$日志）{
    $ rootScope。在$（'$ stateChangeError'，函数（）{
        $ state.go（'登录'）;
    }）;
}）;
 

解决方案

有什么太复杂有关决心，查看文档：

解决

  

您可以使用决心提供内容或数据的控制器，自定义的状态。解析是依赖的可选地图应该被注射到所述控制器

  
  

如果这些依赖关系的承诺，他们将控制器被实例化和$ stateChangeSuccess事件被触发之前解决，并转化为价值。

...

  

例如：

  
  

每个在下面的决心对象必须（通过deferred.resolve（），如果他们的承诺）控制器初始化之前得到解决。注意，每个解析对象是如何注入作为参数到控制器

  $ stateProvider.state（'myState'，{
    解决：{       //使用函数简单的返回值的示例。
       //因为它不是一个承诺，它会立即解决。
       simpleObj：功能（）{
          {返回值：简单！};
       }，
       ...
 

如果你想要一些工作plunker，有类似Q＆安培;答：

• UI路由器决心抛出错误提供商没有找到


• 角UI状态 - 多观点没有看到我的决心数据

如果我们想获得DRY发挥作用，我们应该开始思考国家层次（父/子/ ...）。因为这里所讨论：

• 如何继承UI路由器解决数据

我们可以引进一些超级'根'状态一些通用的：

  $ stateProvider
  .STATE（'根'，{
    摘要：真实，
    //见下文高清控制器
    控制器：'RootCtrl'，
    //这是模板，下面讨论 - 非常重要
    模板：'＆LT;格UI的视图＆gt;＆LT; / DIV＆GT;，
    //用于解决只有一次，但适用于所有国家的儿童
    解析：{
      用户：功能（authService）{
          返回authService.getUserDetails（）;
      }
    }
  }）
 

这将意味着，每个孩子的状态，将提供解决（已被解决）的祖父母（'根'）

在的情况下，我们要区分父母和孩子解决了，我们可以做到这一点，使用默认解析名称...查看详细信息点击这里：

• 角度UI的路由状态母公司和决心（嵌套议决）

在情况下，我们还想解决的拒绝后，我们就可以要求 $状态提供商和重定向。最好的地方是某种改变状态侦听。有详细说明如何使用 $ rootScope。在$（'$ stateChangeStart， 作为身份验证

混淆$ locationChangeSuccess和$ stateChangeStart

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.

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.

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.

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');
    });
});

解决方案

There is nothing so complicated about resolve, check the documentation:

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.

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.

...

Examples:

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!'};
       },
       ...

In case you want some working plunker, there is similar Q & A:

• ui router resolve is throwing error provider not found
• Angular-ui State - Multiple views not seeing my resolve data

If we would like to get DRY into play, we should start to think about state hierarchy (parent / child / ...). As discussed here:

• How to inherit resolve data in ui-router

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();
      }
    }
  }) 

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:

• angular ui-route state parent and resolve (nested resolves)

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

Confusing $locationChangeSuccess and $stateChangeStart

这篇关于使用UI-路由器解析验证Angularjs的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！