現状の AnagularJS では必ずと言っていいほど、 ui-router を使っているが、ログインが必要な state と、そうでない state を作る必要が出てきてしまったので、そのための方法を調べてみた。
var app = angular.module('bgcApp', [
'ui.router'
]);
app.config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/");
$stateProvider
.state('home', {
url: '/',
templateUrl: '/views/home.html',
controller: 'homeController',
isLoginRequired: true
})
.state('login', {
url: '/login',
templateUrl: '/views/login.html',
controller: 'loginController as login'
})
.state('logout', {
url: '/logout',
controller: 'logoutController'
});
とりあえず、このような形で3つの state を用意してみた。home には新たな属性値として isLoginRequired を追加した。
app.service('UserService', function () {
this.isLoggedIn = function () {
// TODO: implement it.
return true;
}
});
これは別に必要ないのだが、ユーザがログインしているかどうかを判定する機能を持ったサービスを用意しておく。
app.run(['$rootScope', '$state', 'UserService', function ($rootScope, $state, UserService) {
$rootScope.$on('$stateChangeStart', function(e, toState, toParams, fromState, fromParams){
if (toState.isLoginRequired) {
if (!UserService.isLoggedIn()) {
$state.go('login');
e.preventDefault();
}
}
});
}]);
ui-router には、 $stateChangeStart というイベントが用意されており、これは状態の変更前に呼ばれる。 toState には、遷移後の state 設定が入っているので、 isLoginRequired を読み取って、ログインしていないようだったら、 login へ遷移させる処理を書くことができる。
この際、 e.preventDefault() で遷移イベントを止めることを忘れずに。
これで、非ログイン時の、ログインページヘの強制遷移処理を書くことができた。