angular 未登錄狀態(tài)攔截路由跳轉的方法
更新時間：2018年10月09日 10:16:24 作者：LLDD2014425
今天小編就為大家分享一篇angular 未登錄狀態(tài)攔截路由跳轉的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
使用angularjs的但頁面應用時，由于是本地路由在控制頁面跳轉，但是有的時候我們需要判斷用戶是否登錄來判斷用戶是否能進入界面。
angularjs是mvc架構所以實現(xiàn)起來很容易也很靈活，我們只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',{//同意用戶協(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();// 取消默認跳轉行為
$("#my-modal-loading").modal('open');//開啟加載中l(wèi)oading
// $state.go("login",{from:fromState.name,w:'notLogin'});//跳轉到登錄界面
}
});
});
以上這篇angular 未登錄狀態(tài)攔截路由跳轉的方法就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
本篇文章主要介紹了Angular2數(shù)據綁定的相關知識。具有很好的參考價值。下面跟著小編一起來看下吧2017-04-04
本篇文章主要介紹了angular2路由切換改變頁面title的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
angularjs實現(xiàn)多選框分段全選效果實現(xiàn)
這篇文章主要為大家介紹了angularjs實現(xiàn)多選框分段全選效果實現(xiàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-06-06
這篇文章主要介紹了AngularJS表單驗證功能,結合具體實例形式分析了AngularJS表單驗證的操作步驟、實現(xiàn)技巧與相關注意事項,需要的朋友可以參考下2017-05-05
Ionic+AngularJS實現(xiàn)登錄和注冊帶驗證功能
這篇文章主要介紹了Ionic+AngularJS實現(xiàn)登錄和注冊帶驗證功能,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-02-02
Angular實現(xiàn)的自定義模糊查詢、排序及三角箭頭標注功能示例
這篇文章主要介紹了Angular實現(xiàn)的自定義模糊查詢、排序及三角箭頭標注功能,涉及AngularJS針對頁面table元素的遍歷、查詢、判斷、排序等相關操作技巧,需要的朋友可以參考下2017-12-12
這篇文章主要給大家深入的介紹了關于Angular.JS中Scope繼承的相關資料，Angular。JS中scope之間的繼承關系使用JavaScript的原型繼承方式實現(xiàn)，文中介紹的非常詳細，對大家具有一定的參考學習價值，需要的朋友們下面來一起看看吧。2017-06-06
本文主要介紹AngularJs Modules的相關知識，這里整理了詳細的資料及簡單示例代碼，有興趣的朋友可以參考下2016-09-09
angularjs指令中的compile與link函數(shù)詳解
這篇文章主要介紹了angularjs指令中的compile與link函數(shù)詳解,本文同時訴大家complie,pre-link,post-link的用法與區(qū)別等內容,需要的朋友可以參考下2014-12-12
這篇文章主要介紹了AngularJS中數(shù)據的雙向綁定機制,雙向綁定使得HTML中呈現(xiàn)的view與AngularJS中的數(shù)據一致,是Angular的重要特性之一,需要的朋友可以參考下2016-03-03