angular如何實(shí)現(xiàn)未登錄狀態(tài)攔截路由跳轉(zhuǎn)

這篇文章給大家分享的是有關(guān)angular如何實(shí)現(xiàn)未登錄狀態(tài)攔截路由跳轉(zhuǎn)的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

使用angularjs的但頁面應(yīng)用時，由于是本地路由在控制頁面跳轉(zhuǎn)，但是有的時候我們需要判斷用戶是否登錄來判斷用戶是否能進(jìn)入界面。

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

第一步：定義myapp

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

第二步：使用config來配置路由跳轉(zhuǎn)

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');//后面這個就是進(jìn)入這個模板時候要加載進(jìn)來的js
     }]
    }
  })
  .state('userAgree',{//同意用戶協(xié)議頁面
   url:"/userAgree",
   templateUrl:basePath+'page/agreement.html'
  })
  .......
 $urlRouterProvider.otherwise("/index");/*BproDtails*/
});

第三步：使用run來進(jìn)行登錄驗(yàn)證攔截

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

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

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