ログイン後の角度ナビゲーション指示のリロード

Question

私はangularjsを学んで、私の最初の "本当の"プロジェクトに取り組んでいます。私はカップル時間をオンラインで検索して答えを出しましたが、理解するのに十分な簡単な用語で関連するものは見つけられないようです。

私は、ナビゲーションヘッダを読み込みディレクティブ持っている：私はAuth0で働いていたと働いてしまったことを

app.directive('navDirective', function() { 
    return { 
       templateUrl: '../../views/nav.html' 
      }; 
}); 

をそして、私のindex.htmlファイルに私は単に

最初

<nav-directive> </nav-directive> 

を持っています、ナビゲーション項目にng-showを追加して、ユーザーがいないときはログインのみが表示され、ユーザーがいるときは他のユーザーが表示されます。

ここで、Auth0を使用する代わりに、ローカル認証を取得しようとしています。それは動作しますが、ナビゲーションテンプレートの更新が表示される前に、ログイン後にブラウザーのリロードボタンを押す必要があります。

Auth0を使用しているときに私のウェブサイトを実際にAuth0にしておき、コールバックによってページがリロードされることがわかったので、私のナビアイテムが表示されます。

パスポートのローカル戦略を使用してローカルにログインすると、ナビゲーションテンプレートを強制的にリロードすることはできますか？または、今ユーザがいることに気付くように、ng-showをテンプレートのリスト項目に変更しますか？

今夜読んでみると$ watchを使っているようですが、 "$ watch-for-dummies"ページが見つからず、どのように動作するのか混乱しています。リンク機能とどのように私はそれを引き起こすだろう。

私nav.htmlテンプレートは

<nav class="navbar navbar-expand-lg navbar-dark bg-dark" ng-controller="NavCtrl"> 
     <a class="navbar-brand" href="#" ng-show="currentUser">User: {{ currentUser.username }}</a> 

     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation"> 
      <span class="navbar-toggler-icon"></span> 
     </button> 

     <div class="collapse navbar-collapse navbarCollapse justify-content-end" id="navbarNavDropdown"> 
      <ul class="nav navbar-nav "> 

      <li class="nav-item" ng-show="currentUser"> 
       <a class="nav-link nav-item-colapse" ui-sref="home">Home </a> 
      </li> 

      <li class="nav-item" ng-show="currentUser"> 
       <a class="nav-link nav-item-colapse" ui-sref="view2">View 2</a> 
      </li> 

      <li class="nav-item" ng-show="currentUser"> 
       <a class="nav-link nav-item-colapse" ui-sref="view3">View 3</a> 
      </li> 

      <li class="nav-item" ng-show="currentUser"> 
       <a class="nav-link nav-item-colapse" ui-sref="reports">Reports</a> 
      </li> 


      <li class="nav-item dropdown" ng-show="currentUser"> 
       <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
       Admin 
       </a> 
       <div class="dropdown-menu" style="right: 0; left: auto;" aria-labelledby="navbarDropdownMenuLink"> 
       <a class="dropdown-item nav-item-colapse" ui-sref="sub1">Sub Task1</a> 
       <a class="dropdown-item nav-item-colapse" ui-sref="sub2">Sub Task2</a> 
       <a class="dropdown-item nav-item-colapse" href="http://www.google.com">Do Something Else</a> 
       </div> 
      </li> 

      <li class="nav-item"> 
       <a class="nav-link active" ui-sref="login" ng-show="!currentUser">Login</a> 
      </li> 


      <li class="nav-item"> 
       <a class="nav-link" ng-click="logout()" ng-show="currentUser">Logout</a> 
      </li> 

      </ul> 
     </div> 
     </nav> 

あるとnavCtrlは次のとおりです。

app.controller("navCtrl", function($scope, mainSrvc) { 

    mainSrvc.getUser().then(function(user){ 
     $scope.user = (user.data); 
     console.log('nav ctrl ran') //except it doesn't when logging in locally 
     console.log(($scope.user)); 
    }); 
    }); 

そして私は、私はこの完全に間違っているか、何についてのつもりかどうかわからないんだけど、この時点。

提案や説明はありますか？

Answer 1

ng-if = "vm.isLoggedIn（）"を使用して、ユーザーが存在するかどうかを知ることができます。ログインコントローラリターンで

<nav ng-controller="LoginController as vm" ng-if="vm.isLoggedIn()" 
class="navbar navbar-inverse navbar-static-top" ng-init="vm.init()"> 

ユーザーが認証

function LoginController($http, $location, $window, AuthFactory, jwtHelper) { 
    var vm = this; 

    vm.isLoggedIn = function() { 
     if (AuthFactory.isLoggedIn) { 
      return true; 
     } 
     else { 
      return false; 
     } 
    }; 
vm.login = function() { 
     if (vm.username && vm.password) { 
      var user = { 
       username: vm.username, 
       password: vm.password 
      }; 

      $http.post('/api/users/login', user).then(function (response) { 

       if (response.data.success) { 
        $window.sessionStorage.token = response.data.token; 
        AuthFactory.isLoggedIn = true; 
        var token =$window.sessionStorage.token; 
        var decodedToken = jwtHelper.decodeToken(token); 
        vm.loggedInUser = decodedToken.username; 
       } 
      }).catch(function (error) { 
       console.log(error); 
      }) 
     } 

    } 

後にログインするかしないwheather