web-dev-qa-db-ja.com

AngularJSに元のコンテンツを表示せずに、ルートをキャンセルして他のルートにリダイレクトする

Httpサービスをチェックして、ユーザーが認証されているかどうか、およびAngularJS 1.2.0rc1の特定のページ（コントローラー）を表示する権限があるかどうかを確認したいと思います。

私はこのシナリオを持っています：ユーザーAが訪問したい http://www.example.com/content 。これで、認証されていないときにこのコンテンツにアクセスできないようにする必要があります。ユーザーが認証されていない場合は、 http://www.example.com/login にリダイレクトする必要があります。

これでなんとかできましたが、コンテンツページのレンダリングされたhtmlが簡単に表示されます。これは欲しくない。コンテンツページをレンダリングせずに、ログインページにリダイレクトするにはどうすればよいですか？

私は自分のルートをそのように登録します：

$routeProvider.when('/login', route.resolve('Login', false))
$routeProvider.when('/content', route.resolve('Content', true))

今私はこれを試しました：

$rootScope.$on('$routeChangeStart', function (event, route) {
    if (route.requiresLogin) {
        $http.get('/api/user/loggedin/').then(function (response) {
            if (response !== 'true') {
                $location.path('/login');
            }
        });
    }
});

これは機能しますが、他のページのhtmlのコンテンツ（コンテンツ）が点滅しているのがわかります。

私はそれを読みました ここ ルートが解決されたときに解決機能を変更することもできます：

    var resolve = function (baseName, requiresLogin) {
    var routeDef = {};
    var dependencies = [routeConfig.getControllersDirectory() + baseName + 'Controller.js'];

    routeDef.templateUrl = routeConfig.getViewsDirectory() + baseName.toLowerCase() + '.html';
    routeDef.controller = baseName + 'Controller';
    routeDef.requiresLogin = requiresLogin;
    routeDef.resolve = {
        load: ['$q', '$rootScope', '$http', '$location', function ($q, $rootScope, $http, $location) {
            console.log(requiresLogin);
            if (requiresLogin) {
                return checkLoggedIn($q, $rootScope, $http, $location);
            } else {
                return resolveDependencies($q, $rootScope, dependencies);
            }
        }]
    };

    return routeDef;
}

ただし、ここではページも簡単に表示されます。

あなたが私を助けてくれることを願っています。

angularjsangularjs-routing
14
Aldentev

最初の答えは機能するはずですが、 $ q を使用してそれを行うには、defer.resolve()またはdefer.reject("rejection_reason")を使用し、次に$routeChangeErrorをリッスンします。 routeProviderが管理するng-viewの外部の要素にバインドされているトップレベルのコントローラー。

したがって、HTMLでは、次のようになります。

<body ng-app="app" ng-controller="DocumentCtrl">
  <div ng-view>
  </div>
</body>

次に、そのルートは次のように定義されます。

when('/home', {
  templateUrl: templateUrl blah,
  controller: baseName + 'Controller',
  resolve: {
    load: function($q, MY_USER_SERVICE){
      var defer = $q.defer();
      if(~MY USER LOGGED_IN LOGIC RETURNS TRUE~){
        defer.resolve();
      } else {
        defer.reject("not_logged_in");
      }
      return defer.promise;

    }
  }
}).

次に、私のDocumentCtrlコントローラーには次のものが含まれます。

$scope.$on("$routeChangeError", function(evt,current,previous,rejection){
  if(rejection == "not_logged_in"){
    //DO SOMETHING
  } else {
    //OR DO SOMETHING ELSE
  }
});

上記を実行していますが、ロードしてはいけないビューのフラッシュはありません。

22
Ade