角度UIルータ1.0.0 - $ transitions.onBeforeで経路負荷を防ぐ

Question

.$on($stateChangeXから$transitions.onX(（see $transitions here）に変更されたUI Router 1.0.0にアップグレードしました。

ユーザーのプロフィールとそのア​​クセスを解決してからページに移動する必要があります（たとえば、移行しようとしているページが表示されないようにする必要があります）。前に、私はstateに直接resolveを使用することができた、そのように、私は順次必要なものパススルー：

state('my-state', { 
     ... 
     resolve : { 
      ProfileLoaded : ['$rootScope', function ($rootScope) { 
       return $rootScope.loadProfile(); 
      }], 
      access: ['Access', 'ProfileLoaded', function (Access, ProfileLoaded) { 
       return Access.hasORRoles(['admin']); //either $q.reject(status code); or "200" 
      }] 
     } 
    }) 

をそれから私は簡単に$stateChangeErrorにエラーの種類を取得することができます：

app.run(... 
    $rootScope.$on('$stateChangeError', function (event, toState, toParams, fromState, fromParams, error) { 

     if (error === 401) { 
      $state.go('home'); 
     } 
     ... 

---

$transitionsで

、私は同じことをやろうとしている...

.state('user.my-page', { 
    ... 
    data: { 
    loadProfile: true, 
    roles: [ 
     'admin' 
    ] 
    } 
}); 


app.run(... 

    $transitions.onBefore({to: profile}, function(trans) { 
    return loadProfile().then(function (prof) { 
     var substate = trans.to(); 
     return Access.hasORRoles(substate.data.roles); //either $q.reject(status code); or "200" 
    }); 
    }); 

    $transitions.onError({}, function(trans) { 
    var error = trans && trans._error; 

    if (error == 401) { 
     $state.go('home'); 
    } 
    ... 

だから私の質問は次のとおりです。

onBeforeは、データをチェックする前にユーザーを確保する観点からresolveをナビゲートすることができないと同じことをするのでしょうか？ページが読み込まれた後、ページがロードされた後に$state.goでリダイレクトされています。

Answer 1

ui-router 1.0.0-rc.1で始まるものは、はるかに理解しやすいです。

最初に、authenticateを任意のルート設定に追加します。

その後：これが何をしているか

/** 
* Authentication Resolvable - if I add "authenticate" to a route params, this will make sure the user is logged in 
* before proceeding. 
*/ 
$transitions.onStart({}, (trans) => { // on any route, do the following... 
    let next = trans.to(); // get the state and its params 
    if (next.authenticate) { 
    trans.addResolvable({ 
     token : 'authResolve', // the token can be anything, here, we never actually use it in this specific case 
     deps : ['$state', 'Auth', '$q'], // inject what I need 
     resolveFn: ($state, Auth, $q) => { 
     return new $q((resolve, reject) => { // make sure this is a promise, in order to delay the route 
      let onUserLoggedIn =() => { 
      console.log('[Auth Service] the necessary *authenticate* state PASSED the resolvable, continue on!'); 
      return resolve(); 
      }; 
      let onUserLoggedOut =() => { 
      console.log('[Auth Service] the necessary *authenticate* state FAILED the resolvable, going to login page!'); 
      $state.go('login'); 
      return reject(); 
      }; 
      // this can be substituted for any promise, observable, or async operation, here I'm using an observable 
      Auth.isLoggedInAsync$().subscribe((isLoggedIn) => { 
      if(!isLoggedIn) return onUserLoggedOut(); 
      return onUserLoggedIn(); 
      }) 
     }) 
     } 
    }); } 
}); 

は、実際には非同期でユーザーをしようとして取得するためにAuthサービス内で何らかのアクションを実行し、ユーザーがログインしていることを確認すること、そしてもしされていません。