离子侧菜单 - 根据用户是否经过身份验证显示链接

时间:2016-12-16 11:08:19

标签: javascript angularjs ionic-framework menu ionic-view

我有一个离子应用程序,我有一个多页面的侧面菜单。我想根据用户是否经过身份验证来更改侧边菜单中的链接。所以,在路线中我设置了这样的模板和页面:

module.export = angular.module('coop').config(function($stateProvider, $urlRouterProvider) {
  $stateProvider

  //side menu
  .state('main', {
    url: '/main',
    abstract: true,
    templateUrl: 'templates/main.html',
  })

 .state('main.public', {
    url: '/public',
    views: {
      'content': {
        templateUrl: 'templates/public.html',
        controller: 'PublicController'
      }
    },
    authenticate: false
  })

  .state('main.articles', {
    url: '/articles',
    views: {
      'content': {
        templateUrl: 'templates/articles.html',
        controller: 'ArticlesController'
      }
    },
    authenticate: true
  }) 

因此,根据状态是main.public还是main.articles,状态authenticate: truefalse以及所有其他状态的链接应该不同。如何在侧边菜单中查看?

<ion-side-menus>
  <ion-side-menu side="left" class="side-menu" scroll="false">
    <ul class="menu">
      <div class="side-menu-header">
      </div>
      <div class="menu-main">
        <li>
          <a ng-if="authenticated" menu-close ui-sref="main.profile">Min profil</a>
          <a ng-if="!authenticated" menu-close ui-sref="main.login">Logg in</a>
        </li>
      </div>
      <div class="menu-last">
        <li>
          <a ng-if="authenticated" menu-close ui-sref="main.logout">Logg out</a>
        </li>
      </div>
    </ul>
  </ion-side-menu>
  <ion-side-menu-content>
    <ion-nav-view name="content"></ion-nav-view>
  </ion-side-menu-content>
</ion-side-menus>

更新

对于任何人可能需要这个,我通过在stateChangeStart的{​​{1}}上设置rootscope变量来解决它:

app.js

1 个答案:

答案 0 :(得分:0)

你实际上做到了。在控制器中添加$scope.authenticated = $state.authenticate

或者在登录/注销时在名为globals的服务中设置全局值globals.authenticated。然后在侧边菜单中使用它。 ng-if="globals.authenticated"

或者您可以在loacal storage / sqlite中设置它