角UI路由器:用于家庭嵌套状态来区分登录和注销 [英] Angular UI Router: nested states for home to differentiate logged in and logged out
问题描述
我开始使用样板的新项目是指由MEAN.JS(不.IO)提供。结果
我是新来的用户界面 - 路由器,我无法搞清楚如何实现这样的情景:
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
- 路线的网址为/,应不会改变。
这里的路线提供商的样子目前:
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方面一个pre-保存钩来决定去哪个国家。怎么会是什么样子的?
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 如上所述提供的行为。首先,有一个状态定义发生了变化,从抽象的移动网址
到这两个孩子的状态,并引入登录状态后检查:
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
这篇关于角UI路由器:用于家庭嵌套状态来区分登录和注销的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!