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

小编典典

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

angularjs

我正在使用MEAN.JS（不是.IO）提供的样板MEAN启动一个新项目。
我是ui-router的新手，在弄清楚如何完成此方案时遇到了麻烦：

如果用户已登录，请进入状态“ home.loggedIn”。
如果用户已注销，请进入状态“ home.loggedOut”
路由网址为“ /”，并且不应更改。

这是路由提供者当前的样子：

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'
    });
  }
]);

我正在寻找某种类似于db术语的pre-save钩子来确定要进入的状态。看起来怎么样？

阅读 219

2020-07-04

共1个答案

小编典典

有一个提供上述行为的插件。首先，状态定义有所变化，将状态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设置 isLoggedIn 重定向到适当的子状态：

.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");
    }
  });
}])

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

2020-07-04