欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

angular 未登錄狀態(tài)攔截路由跳轉(zhuǎn)的方法

 更新時間：2018年10月09日 10:16:24   作者：LLDD2014425  
今天小編就為大家分享一篇angular 未登錄狀態(tài)攔截路由跳轉(zhuǎn)的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

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

angularjs是mvc架構(gòu)所以實現(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');//后面這個就是進入這個模板時候要加載進來的js
     }]
    }
  })
  .state('userAgree',{//同意用戶協(xié)議頁面
   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();// 取消默認跳轉(zhuǎn)行為
   $("#my-modal-loading").modal('open');//開啟加載中l(wèi)oading

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

以上這篇angular 未登錄狀態(tài)攔截路由跳轉(zhuǎn)的方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

相關(guān)文章

  • AngularJS入門教程之Cookies讀寫操作示例

    AngularJS入門教程之Cookies讀寫操作示例

    這篇文章主要介紹了AngularJS的Cookies讀寫操作,結(jié)合實例形式分析了ngCookies模塊與get和put方法進行cookie讀寫操作的相關(guān)實現(xiàn)技巧,需要的朋友可以參考下
    2016-11-11
  • AngularJS實現(xiàn)星星等級評分功能

    AngularJS實現(xiàn)星星等級評分功能

    這篇文章主要為大家詳細介紹了AngularJS實現(xiàn)星星等級評分功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2016-09-09
  • angular + express 實現(xiàn)websocket通信

    angular + express 實現(xiàn)websocket通信

    最近需要實現(xiàn)一個功能,后端通過TCP協(xié)議連接雷達硬件的控制器,前端通過websocket連接后端,當控制器觸發(fā)消息的時候,把信息通知給所以前端,本文給的大家講解angular + express 實現(xiàn)websocket通信的思路,感興趣的朋友一起看看吧
    2023-09-09
  • Angularjs實現(xiàn)分頁和分頁算法的示例代碼

    Angularjs實現(xiàn)分頁和分頁算法的示例代碼

    分頁是很多web應用都會用到的，本篇文章主要介紹了Angularjs實現(xiàn)分頁和分頁算法的示例代碼，具有一定的參考價值，有興趣的可以了解一下。
    2016-12-12
  • Ionic + Angular.js實現(xiàn)驗證碼倒計時功能的方法

    Ionic + Angular.js實現(xiàn)驗證碼倒計時功能的方法

    驗證碼倒計時這個功能相信對大家每個人來說都不陌生，之前介紹了在Android中的實現(xiàn)方法，下面這篇文章主要給大家介紹了利用Ionic + Angular.js實現(xiàn)驗證碼倒計時功能的相關(guān)資料，文中介紹的非常詳細，需要的朋友們下面來一起看看吧。
    2017-06-06
  • AngularJS $on、$emit和$broadcast的使用

    AngularJS $on、$emit和$broadcast的使用

    本文主要介紹AngularJS $on、$emit和$broadcast的使用,這里整理了詳細的資料及簡單示例代碼有興趣的小伙伴可以參考下
    2016-09-09
  • AngularJS中$http使用的簡單介紹

    AngularJS中$http使用的簡單介紹

    在AngularJS中主要使用$http服務與遠程http服務器交互，本篇文章主要介紹了AngularJS中$http使用的簡單介紹，非常具有實用價值，需要的朋友可以參考下。
    2017-03-03
  • AngularJS使用自定義指令替代ng-repeat的方法

    AngularJS使用自定義指令替代ng-repeat的方法

    這篇文章主要介紹了另一種即具有與ng-repeat一樣處理大量數(shù)據(jù)的綁定的功能，又具有超高性能的自定義方法，有需要的小伙伴們可以參考借鑒，下面來一起看看吧。
    2016-09-09
  • Angular項目中$scope.$apply()方法的使用詳解

    Angular項目中$scope.$apply()方法的使用詳解

    這篇文章主要給大家介紹了關(guān)于Angular項目中$scope.$apply()方法使用的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家學習或者使用Angularjs具有一定的參考學習價值，需要的朋友們下面跟著小編一起來看看吧。
    2017-07-07
  • 深入淺析angular和vue還有jquery的區(qū)別

    深入淺析angular和vue還有jquery的區(qū)別

    vue是一個漸進式的框架, 是一個輕量級的框架而angular是一個mvc框架, 各有千秋，下面小編通過本文給大家介紹angular和vue還有jquery的區(qū)別，感興趣的朋友一起看看吧
    2018-08-08

最新評論