私は、次のように構成されたログイン ビューとメイン ビューを持つ小さな 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 にリダイレクトする」のようなことを書きたかったのです。
...
... 待ってください。ルートの変更を何らかの方法で聞くことはできますか? とにかくこの質問を投稿して、引き続き調べます。
ベストアンサー1
いくつかのドキュメントとソース コードを調べた結果、動作するようになったと思います。おそらく、これは他の誰かの役に立つでしょうか?
モジュール構成に以下を追加しました:
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" );
}
}
});
})
奇妙に思える点の 1 つは、「次の」Route オブジェクトに URL または他の何かがなかったため、部分的な名前 ( ) をテストする必要があったことですlogin.html。もっと良い方法があるのではないでしょうか。