Question

我正在努力使用ui-router，离子和命名视图。

在我以前的角项目中，我检查了主app.js文件，如果有人登录，如果没有，我使用$ state.go（）重定向到登录状态;

这方面的一个例子：

angular.module() ...
.run(function() {

$rootScope.$on('$stateChangeStart', function() {
if(LoginService.isLoggedIn() !== true) {
   $state.go('login');
}
}

});

现在这是我正在使用的简化版本，但它显示了我的意思（我希望）。

这在我的其他项目中效果很好，现在我正在尝试Ionic，并且他们使用命名视图。当应用程序加载时，它会将我正确地重定向到登录页面。但是当有人点击（标签）按钮时。它重定向到正确的url（/ login），但视图未加载，因为tab按钮引用命名视图：例如：

标签：

<!-- Dashboard Tab -->
<ion-tab title="User" icon-off="ion-ios-person" icon-on="ion-ios-person" href="#/tab/dash">
  <ion-nav-view name="tab-dash"></ion-nav-view>
</ion-tab>

<!-- Chats Tab -->
<ion-tab title="Chats" icon-off="ion-ios-chatboxes-outline" icon-on="ion-ios-chatboxes" href="#/tab/chats">
  <ion-nav-view name="tab-chats"></ion-nav-view>
</ion-tab>

<!-- Account Tab -->
<ion-tab title="Account" icon-off="ion-ios-gear-outline" icon-on="ion-ios-gear" href="#/tab/account">
  <ion-nav-view name="tab-account"></ion-nav-view>
</ion-tab>

州的定义如下：

$stateProvider

// setup an abstract state for the tabs directive
  .state('tab', {
  url: "/tab",
  abstract: true,
  templateUrl: "templates/tabs.html"
})

// Each tab has its own nav history stack:

.state('tab.dash', {
  url: '/dash',
  views: {
    'tab-dash': {
      templateUrl: 'templates/tab-dash.html',
      controller: 'DashCtrl'
    }
  }
})

Can I use $state.go to not only redirect me to a state but also use a specific named view？

我现在已经四处看了几个小时，但我找不到下降的答案。

Answer 1

您说要阻止用户在未登录的情况下查看某些视图，如果不是，则应将其重定向到/login。您可以尝试使用LoginService来检查路由是否需要身份验证，或者检查它们是否实际经过身份验证。

angular.module("myApp")
.run(function ($rootScope, $state, LoginService) {
$rootScope.$on("$stateChangeStart", function(event, toState, toParams, fromState, fromParams){
  if (toState.authenticate && !LoginService.isAuthenticated()){
    // User isn’t authenticated
    $state.transitionTo("login");
    event.preventDefault(); 
   }
 });
});

然后你可以使用authenticate修复你的路线：true

myApp.config(function($stateProvider, $urlRouterProvider){
$stateProvider
.state("tab.dash", {
  url: "/dash",
  views: {
    'tab-dash': {
     templateUrl: 'templates/tab-dash.html',
     controller: 'DashCtrl'
  },
  authenticate: true
})
.state("login", {
  url: "/login",
  templateUrl: "templates/login.html",
  controller: "LoginCtrl",
  authenticate: false
});
// Send to login if the URL was not found
$urlRouterProvider.otherwise("/login");
});

$ state.go到命名视图

1 个答案: