[解決済み] 条件に応じて特定のルートにリダイレクトする機能
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などを持っていなかったからです。もしかして、もっといい方法があるのでしょうか?
関連
-
[解決済み] オブジェクトと選択機能を備えたAngularJS BootstrapUI Typeahead
-
[解決済み] angularのpostリクエストでpreflightのレスポンスがHTTPステータスコード403で不正になる。
-
[解決済み] angularjsで$compileを操作する
-
[解決済み] createspyとcreatespyobjの違いは何ですか?
-
[解決済み] ngInject'を本当に書く必要があるのか?
-
[解決済み] AngularJs .$setPristineでフォームをリセットする
-
[解決済み] Angularjsを使用してローカルストレージにデータを保存するにはどうすればよいですか?
-
[解決済み] Angular.js: $evalの仕組みとバニラevalとの違いは何ですか?
-
[解決済み] angularJSの::の意味するところ
-
[解決済み] angular-routeとangular-ui-routerの違いは何ですか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】Angularjs accordion ng-click on panel-header
-
[解決済み] 方法 $state.go()
-
[解決済み] ディレクティブ '...' が要求するコントローラ 'ngModel' が見つかりません。
-
[解決済み] AngularJSの「href」と「ng-href」の違いについて
-
[解決済み] ngInject'を本当に書く必要があるのか?
-
[解決済み] AngularJS: ngRouteが動作しない。
-
[解決済み] なぜAngularJSはselectに空のオプションを含めるのですか?
-
[解決済み] ServiceとFactoryで迷う
-
[解決済み] ng-repeat :単一フィールドによるフィルタリング
-
[解決済み] ng-repeat内のng-click関数にパラメータを追加しても、うまくいかないようです。