AngularJS $ location.pathはリダイレクトされません

Question

私は解決策を探していましたが、まだ正しく動作するように$location.path()を取得できません。

大文字と小文字の区別はありません。肯定的な認証の後、私はルートアドレス：/#/に戻そうとしています。アドレスバーのパスは変更されていますが、ページは変更されません。好奇心が強いのは、アドレスバーで "Enter"を押すと、ルートアドレスに行く前にページがリロードされます。そしてもっと興味があるのは、私は実際に別のページにリダイレクトする前に、複数回入力する必要があります。これは奇妙なことです。なぜなら、これは「1ページ」アプローチがどのように機能するのかということではないからです。

私はAngular Routerを使用しており、残りのページは正常に動作しています。パスを入力して「Enter」を押すと、すべての画面がスムーズに読み込まれます。唯一の問題は、認証ステップです。

認証の詳細が保存されていないため、アプリが最初にロードされ、/loginページが発行されると、アプリは肯定的な認証（必ずしもそうではない）の後にルートアドレスにリダイレクトされます。しかし、アプリケーションの実行中に認証の詳細が失われ、ユーザーが/loginページにリダイレクトされた場合、アプリはルートURLに戻ることはできません。

私は、経路がどのように変化しているかを示すフローチャートを作成しました。緑色の領域は、ユーザーがアプリを開き、まだログインしていない最初のケースを示します。読み取り領域は、何らかの理由（たとえば、古いトークン、別のソースから変更されたパスワード）でユーザーが認証の詳細を失った場合の2番目のケースを示します。ユーザーは/loginページにリダイレクトされ、肯定的な認証の後、ルートURLに戻ることはできません。

私はダイジェストが進行中で実際にあることを、$scope.$applyで$location.path('/')をラップしようとしましたが、エラーを受け取りました。 $timeoutにそれをラップすることも同様に役に立たなかった。もちろん、パスを変更した後にページをリロードすることはできますが、インターフェイスが消えるという醜い効果が生じます。

以下は「ログイン」ボタンを押した後にトリガーされるコードです。

function doLogin() { 
    vm.loginInProgress = true; 

    LoginService.login(vm.username, vm.password).then(function() { 
     $location.path('/'); 
    }).catch(function() { 
     var confirm = $mdDialog.confirm() 
      .title('Authentication error') 
      .textContent('Username and/or password is invalid.') 
      .ariaLabel('Authentication error') 
      .ok('OK') 
      .cancel('Forgotten password?'); 

     $mdDialog.show(confirm).catch(function() { 
      //TODO: Forgotten password 
     }) 
    }).finally(function() { 
     vm.loginInProgress = false; 
    }); 
} 

ルート：

$routeProvider 
    .when('/login', { 
     templateUrl: 'views/login.html', 
     controller: 'LoginController', 
     controllerAs: 'vm' 
    }) 
    .when('/', { 
     templateUrl: 'views/home.html', 
     controller: 'HomeController', 
     controllerAs: 'vm', 
     resolve: { 
      init: init 
     } 
    }); 

/* @ngInject */ 
function init(ConfigService, TemperatureService) { 
var ret = {}; 

return ConfigService.finished() 
    .then(function() { 
     return TemperatureService.getSetPoint(); 
    }) 
    .then(function (data) { 
     ret['setpoint'] = data; 
     return TemperatureService.getWorkModes(); 
    }) 
    .then(function (data) { 
     ret['workmodes'] = data; 
     return ret; 
    }); 
} 

それはlocation.path方法の奇妙な行動のように見えます。それとも、私は何かが欠けているだけです。すべての助けに感謝します。

Answer 1

あなたはその解決機能に与えられたコードを実行resolveをとっています。

解決に使用したinit機能に問題がある必要があります。

$routeProvider 
    .when('/login', { 
     templateUrl: 'views/login.html', 
     controller: 'LoginController', 
     controllerAs: 'vm' 
    }) 
    .when('/', { 
     templateUrl: 'views/home.html', 
     controller: 'HomeController', 
     controllerAs: 'vm', 
     resolve: { 
      init: init 
     } 
    }); 

あなたのinitは

var init = function ($q, $rootScope, $location) { 
    if ($rootScope.login) { 
     return true; 
    } else { 
     $location.path('/login') // this is a sample 
    } 
}; 

あなたは、この方法では、いくつかの問題がある可能性があり、ここに行くことができます。一度確認してください。

Answer 2

これは、ルート/が正しく解決されていないため、解決機能initが原因である可能性があります。

$routeChangeErrorイベントを聞くと、何がうまくいかなかったのかを確認できます。あなたの質問に

$rootScope.$on('$routeChangeError', function() { 
    ... 
});