1. ホーム
  2. angularjs

[解決済み] 条件に応じて特定のルートにリダイレクトする機能

2022-03-20 12:59:05

質問

私はログインビューとメインビューを持つ小さなAngularJSアプリを書いていて、このように構成されています。

$routeProvider
 .when('/main' , {templateUrl: 'partials/main.html',  controller: MainController})
 .when('/login', {templateUrl: 'partials/login.html', controller: LoginController})
 .otherwise({redirectTo: '/login'});

私のLoginControllerは、ユーザーとパスの組み合わせをチェックし、これを反映したプロパティを$rootScopeに設定します。

function LoginController($scope, $location, $rootScope) {
 $scope.attemptLogin = function() {
   if ( $scope.username == $scope.password ) { // test
        $rootScope.loggedUser = $scope.username;
        $location.path( "/main" );
    } else {
        $scope.loginError = "Invalid user/pass.";
    }
}

すべてうまくいくのですが、もし私が http://localhost/#/main 結局ログイン画面を迂回してしまいます。ルートが変わるたびに、$rootScope.loggedUserがNULLなら、/loginにリダイレクトする"のように書きたかったんです。

...

...待てよ。どうにかしてルートの変更を聞くことはできないか?とりあえずこの質問を投稿して、探し続けてみます。

解決方法は?

ドキュメントとソースコードに何度か潜った後、私はそれを動作させることができたと思います。おそらく、これは他の誰かのために役立つのでしょうか?

モジュール設定に以下を追加しました。

angular.module(...)
 .config( ['$routeProvider', function($routeProvider) {...}] )
 .run( function($rootScope, $location) {

    // register listener to watch route changes
    $rootScope.$on( "$routeChangeStart", function(event, next, current) {
      if ( $rootScope.loggedUser == null ) {
        // no logged user, we should be going to #login
        if ( next.templateUrl != "partials/login.html" ) {
          // not going to #login, we should redirect now
          $location.path( "/login" );
        }
      }         
    });
 })

おかしいと思うのは、部分名をテストするために( login.html )は、"next" Routeオブジェクトがurlなどを持っていなかったからです。もしかして、もっといい方法があるのでしょうか?