Angular JS

angular js+ui-router ログインの仕組み

  • このエントリーをはてなブックマークに追加
  • LINEで送る
AngularJSでWebシステム開発

日報クラウドnipoでは、ログインをする処理が書かれています。
当然ですね。あなたが誰なのかわからないと、どの日報を表示したらいいかわからんもの。

なので、ログインしてもらうことで、あなたが誰かを特定するわけです。
SPA(シングルページアプリケーション)は、これまでのWebとちょっと考えが違う
ので、ログインのからくりも少し考える必要があります。

今回は、Angular JS + ui-routerを前提にお話します。
実際の動作するプログラムはnipoのホームページから確認してください

Angular JSは、ページ遷移の機能が若干貧弱なので、
外部プラグインであるUI-routerを使うのが通なのです。
Angura通を名乗りたければUI-routerを使うべきです。

さて、UI-routerを使ったログインページの仕組みです

.config(function ($stateProvider, $urlRouterProvider ) {

  $urlRouterProvider.otherwise("/");
  $stateProvider
  .state('/', {
    url: "/",
    views: {
      "viewA": { templateUrl: "views/main.html" ,controller:"MainCtrl" },
    },
    loginRequied:true,
  })
})
//中略〜
.run(function($rootScope , $state ){
  $rootScope.$on('$stateChangeStart', function(e, toState, toParams, fromState, fromParams){
    //ログイン要求ページはログインしていない場合ログインフォームへ飛ばす
    if (toState.loginRequid) {
      if (/*ログイン済みかをここでチェックする*/) {
        //ログインしていない
        $state.go('/login');
        e.preventDefault();
        return ;
      }
    }
  })
})

ポイントはloginRequied:trueの部分です。
ログインが必要なページには、loginRequid:trueを付けておきます。
toState.loginRequidが真のとき、
ログイン済みかチェックをします。未ログインの場合はログインページヘ飛ばします。
e.preventDefault();で標準の挙動(本来のページ遷移)をキャンセルするのも忘れずに。

同じ仕組で、例えば管理者権限が必要なページであればadminRequied:trueとか
適当な名前を付けて作ってあげればいいのです。
そして同じようにtoState.adminRequiedとしてチェックします。

nipoの場合、グローバルメニューが常に表示されている(ログイン前でも)ので、
未ログイン時に、グローバルメニューが押されても、ページが遷移しないように
しています。

実際の動作例はこちらで確認できます
グローバルメニューを押してもページが遷移しないはずです。確認してください

  • このエントリーをはてなブックマークに追加
  • LINEで送る

AngularJS+BootStrapでサロンカルテを作りました

【作品例 サロンカルテ】
サロンカルテはAngular JSとBootStrap3を使って開発されたWebクラウドシステムの1つです。
強力なデータバインド機能のおかげで、お客様のカルテデータをサーバから取得、ng-repeatを使うだけで簡単に画面へ出力できたり、BootStrapで手軽におしゃれな画面が実装できます

サロンカルテのホームページ