AngularJS+Satellizer+Node.js+MongoDB->Instagram-18

Build an Instagram clone with AngularJS, Satellizer, Node.js and MongoDB

18.Navbar 增强

创建一个新文件 controllers/navbar.js 然后把下面内容贴进去:

<!-- lang: js -->
angular.module('Instagram')
  .controller('NavbarCtrl', function($scope, $rootScope, $window, $auth) {
    $scope.isAuthenticated = function() {
      return $auth.isAuthenticated();
    };

    $scope.logout = function() {
      $auth.logout();
      delete $window.localStorage.currentUser;
    };
  });

这段代码应该相当简单。只有两个方法在这里，并且都是依赖 Satellizer 模块来检查是否用户已被授权和执行登出操作。

登出操作应该比你想的要简单。它所要做的就是把 local storage 的 JSON Web Token 清理掉。这里不需要额外的向服务端发送 HTTP 请求操作。注意我早先提到的，我们需要把 currentUser 从 local storage 删掉，否则它还会把用户标记为登入状态，尽管 JSON Web Token 已经不存在了。没有 JWT token = 没有授权。

Satellizer 的 $auth.isAuthenticated() 会做得更多些，它除了检查令牌在 local storage 里面是否存在之外，还要检查它是否过期。

打开 index.html 然后把导航栏部分替换成下面的内容。大量的 ng-if 标签只是基于用户是否被授权，从而判断连接是否可见而已。没别的。

<!-- lang: js -->
<div ng-controller="NavbarCtrl" class="navbar navbar-default navbar-static-top">
  <div class="container">
    <ul class="nav navbar-nav">
      <a href="/" class="navbar-brand"><i class="ion-images"></i> Instagram</a>
      <li><a href="#/">Home</a></li>
      <li ng-if="!isAuthenticated()"><a href="#/login">Log in</a></li>
      <li ng-if="!isAuthenticated()"><a href="#/signup">Sign up</a></li>
      <li ng-if="isAuthenticated()"><a ng-click="logout()" href="">Logout</a></li>
    </ul>
    <ul class="nav navbar-nav navbar-right">
      <li ng-if="isAuthenticated() && currentUser.username">
        <a href="http://instagram.com/{{currentUser.username}}">
          <img class="media-object img-rounded" ng-src="{{currentUser.picture}}">
          @{{currentUser.username}}
        </a>
      </li>
    </ul>
  </div>
</div>

刷新页面，并且假设这时候你仍处于登陆状态，Log in / Sign up 应该已经看不到了。而且，你应该可以看到你的 Instagram 基本资料的照片喝用户名显示在右上角。