angular如何實現未登錄狀態攔截路由跳轉

這篇文章給大家分享的是有關angular如何實現未登錄狀態攔截路由跳轉的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

使用angularjs的但頁面應用時，由于是本地路由在控制頁面跳轉，但是有的時候我們需要判斷用戶是否登錄來判斷用戶是否能進入界面。

angularjs是mvc架構所以實現起來很容易也很靈活，我們只MainController里增加一個路由事件偵聽并判斷，這樣就可以避免未登錄用戶直接輸入路由地址來跳轉到登錄界面地址了。

第一步：定義myapp

var myapp=angular.module("MainController",["ui.router",'infinite-scroll','oc.lazyLoad']);

第二步：使用config來配置路由跳轉

myapp.config(
 function($stateProvider,$urlRouterProvider,$ocLazyLoadProvider,$httpProvider){
 $stateProvider
  .state('index', {//首頁
   url: '/index',
   templateUrl: basePath+'page/gym/lecycle_index.html',
   resolve: {
     loadMyCtrl: ['$ocLazyLoad', function($ocLazyLoad){//這兩行就是loader的使用，此行寫法固定
      return $ocLazyLoad.load(basePath+'src/lecycle_index/le_index.js');//后面這個就是進入這個模板時候要加載進來的js
     }]
    }
  })
  .state('userAgree',{//同意用戶協議頁面
   url:"/userAgree",
   templateUrl:basePath+'page/agreement.html'
  })
  .......
 $urlRouterProvider.otherwise("/index");/*BproDtails*/
});

第三步：使用run來進行登錄驗證攔截

myapp.run(function ($rootScope,$state) {
 $rootScope.$on('$stateChangeStart',function(event){
  // if(toState.name=='login')return;// 如果是進入登錄界面則允許
  // 如果用戶不存在
  if(ifLoginTrue==false){
   console.log("沒有登錄")
   event.preventDefault();// 取消默認跳轉行為
   $("#my-modal-loading").modal('open');//開啟加載中loading

   // $state.go("login",{from:fromState.name,w:'notLogin'});//跳轉到登錄界面
  }
 });
});

感謝各位的閱讀！關于“angular如何實現未登錄狀態攔截路由跳轉”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！