Angular UI Router：嵌套状态的主目录，用于区分已登录和已退出

大佬教程收集整理的这篇文章主要介绍了Angular UI Router：嵌套状态的主目录，用于区分已登录和已退出，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决Angular UI Router：嵌套状态的主目录，用于区分已登录和已退出？

有一个提供上述行为的插件。首先，状态定义有所变化，将状态url从抽象状态转换为两个子状态，并引入登录状态以供以后检查：

  // Redirect to home vIEw when route not found
  $urlRouterProvIDer.otherwise('/');

  // Home state routIng
  $stateProvIDer.
  state('home', {
    //url: '/',
    abstract: true,
    template: '<div ui-vIEw=""></div>',
  }).
  state('home.loggedOut', {
    url: '/',
    ...
  }).
  state('home.loggedIn', {
    url: '/',
    ...
  })
  .state('logon', {
    url: '/logon',
    templateUrl: 'tpl.logon.HTML',
    controller: 'logonCtrl',
  });

现在，我们要做的是用相同的url定义2个状态。第一个将被用作默认值。

现在，我们必须引入一个状态更改观察器，它将根据AuthSvc设置 重定向到适当的子状态：

.run(['$rootScope', '$state', 'AuthSvc', 
 function($rootScope, $state, AuthSvC) {

  $rootScope.$on('$stateChangeStart', function(event, toState, toparams
                                                  , fromState, fromParams) {

    // logged out is logged out
    var doRedirectTologgedOut = !AuthSvc.isLoggedIn 
              && toState.name === "home.loggedIn";

    if (doRedirectTologgedOut) {
        event.preventDefault();
        $state.go("home.loggedOut");
    }

    // logged in is logged in
    var doRedirectTologgedIn = AuthSvc.isLoggedIn 
              && toState.name === "home.loggedOut";

    if (doRedirectTologgedIn) {
        event.preventDefault();
        $state.go("home.loggedIn");
    }
  });
}])

如本例所示，在更改 （单击登录链接）之前，我们将重定向到正确的子状态…即使我们希望看到另一个

解决方法

angular.module('core').config(['$stateProvider','$urlRouterProvider',function($stateProvider,$urlRouterProvider) {
    // Redirect to home view when route not found
    $urlRouterProvider.otherwise('/');

    // Home state routIng
    $stateProvider.
    state('home',{
      url: '/',abstract: true
    }).
    state('home.loggedOut',{
      templateUrl: 'modules/core/views/home.client.view.html'
    }).
    state('home.loggedIn',{
      templateUrl: 'modules/core/views/dashboard.client.view.html'
    });
  }
]);

大佬总结

以上是大佬教程为你收集整理的Angular UI Router：嵌套状态的主目录，用于区分已登录和已退出全部内容，希望文章能够帮你解决Angular UI Router：嵌套状态的主目录，用于区分已登录和已退出所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。