angularjs – Angular UI路由器：home的嵌套状态,用于区分登录和

发布时间：2020-12-17 07:11:00 所属栏目：安全来源：网络整理

导读：我正在使用MEAN.JS(不是.IO)提供的样板MEAN开始一个新项目. 我是ui-router的新手,我无法弄清楚如何完成这个场景：如果用户已登录,请转到“home.loggedIn”状态. 如果用户已注销,请转到“home.loggedOut”状态路由网址为“/”,不应更改. 以下是路由提供商目

我正在使用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语言中的预保存挂钩来确定要转到哪个状态.那会是什么样子？

解决方法

如上所述,存在提供行为的 plunker.首先,状态定义发生了变化,将url从abstract移动到两个子状态,并引入登录状态以便以后检查：

// 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',...
  })
  .state('logon',{
    url: '/logon',templateUrl: 'tpl.logon.html',controller: 'LogonCtrl',});

我们现在所拥有的是2个状态的定义,具有相同的URL.第一个将被视为默认..并使用.

现在,我们必须引入状态更改观察器,它将根据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");
    }
  });
}])

正如this example所示,直到我们改变isLoggedIn(点击登录链接),我们被重定向到正确的子状态……即使我们想看到另一个

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!