使用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 未登錄狀態攔截路由跳轉的方法就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持武林網。
新聞熱點
疑難解答