Angular UI Router:家庭嵌套状态以区分登录和注销 [英] Angular UI Router: nested states for home to differentiate logged in and logged out

问题描述

我正在使用 MEAN.JS(不是 .IO)提供的样板 MEAN 开始一个新项目.
我是 ui-router 的新手，我无法弄清楚如何完成这个场景:

I'm starting a new project using boilerplate MEAN provided by MEAN.JS (not .IO).
I'm new to ui-router and I'm having trouble figuring out how to accomplish this scenario:

• 如果用户已登录，请转到状态home.loggedIn".
• 如果用户已注销，请转到状态home.loggedOut"
• 路由 url 是/"，不应更改.

以下是路由提供者目前的样子:

here's how the route provider looks like currently:

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 术语中的预保存钩子之类的东西，以确定要转到哪个状态.那会是什么样子?

I'm looking for something like a pre-save hook in db terms to determine which state to go to. How would that look like?

推荐答案

有一个 plunker 提供如上所述的行为.首先，状态定义发生变化，将 url 从抽象移动到两个子状态，并引入登录状态以供以后检查:

There is a plunker providing behaviour as described above. Firstly, there is a change in a state definition, moving the url from abstract into both child states, and introducing logon state for later checks:

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

我们现在所做的是定义 2 个状态，具有相同的 url.第一个将作为默认值......并使用.

What we do have right now, is definition of 2 states, with a same url. The first will be taken as a default.. and used.

现在，我们必须引入一个状态变化观察器，它会根据 AuthSvc 设置重定向到正确的子状态 isLoggedIn:

Now, we have to introduce a state change observer, which will redirect to proper sub-state, based on a AuthSvc setting 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(点击登录链接)我们被重定向到正确的子状态......即使我们想看到另一个

As this example shows in action, until we change isLoggedIn (click on logon link) we are redirected to correct sub-state ... even if we would like to see the other

这篇关于Angular UI Router:家庭嵌套状态以区分登录和注销的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！