TypeScript
AngularJS
ログイン

AngularJSのインターセプターを使った、認証チェック

More than 3 years have passed since last update.

AngularJS+Typescriptで会員制サービスを作ったので、その時に使ったソースコードの一部です。

ページ遷移時にresponseをインターセプトしてステータスが401だったらログインに飛ばす。

画面リロード時には$routeChangeSuccessが呼ばれないので、コントローラが呼ばれるたびに認証チェックする処理が別途必要になります。


app.ts

/**

* インターセプター
*/

context.app.factory("SessionInterceptor", function ($q:ng.IQService, $location:ng.ILocationService) {
return {
request: function (config) {
return config || $q.when(config);
},
requestError: function(request){
return $q.reject(request);
},
response: function (response) {
return response || $q.when(response);
},
responseError: function (response) {
if (response && response.status === 401) {
$location.url("/login");
}
return $q.reject(response);
}
};
});

/**
* 環境設定
*/

context.app.config(function ($routeProvider:ng.route.IRouteProvider, $locationProvider:ng.ILocationProvider, $translateProvider:ng.translate.ITranslateProvider, $httpProvider:ng.IHttpProvider) {
$locationProvider.html5Mode(true);
$locationProvider.hashPrefix('!');

/**
* route設定
*/

$routeProvider
.when("/", { templateUrl: "/view/top/Top.html" })
.when("/login", { templateUrl: "/view/login/Login.html" })
.otherwise({redirectTo: "/notFound"});

/**
* セッションチェック
*/

$httpProvider.interceptors.push("SessionInterceptor");
}).run(function($rootScope:ng.IRootScopeService, loginService:domain.login.ILoginService, $location:ng.ILocationService) {
// route変更時のイベント
$rootScope.$on("$routeChangeSuccess", function(event, current, next) {
if(!loginService.isLogged) {
$location.url("/login");
}
});
});