angular 未登錄狀態(tài)攔截路由跳轉(zhuǎn)的方法
更新時(shí)間：2018年10月09日 10:16:24 作者：LLDD2014425
今天小編就為大家分享一篇angular 未登錄狀態(tài)攔截路由跳轉(zhuǎn)的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
使用angularjs的但頁(yè)面應(yīng)用時(shí)，由于是本地路由在控制頁(yè)面跳轉(zhuǎn)，但是有的時(shí)候我們需要判斷用戶是否登錄來(lái)判斷用戶是否能進(jìn)入界面。
angularjs是mvc架構(gòu)所以實(shí)現(xiàn)起來(lái)很容易也很靈活，我們只MainController里增加一個(gè)路由事件偵聽(tīng)并判斷，這樣就可以避免未登錄用戶直接輸入路由地址來(lái)跳轉(zhuǎn)到登錄界面地址了。
第一步：定義myapp
var myapp=angular.module("MainController",["ui.router",'infinite-scroll','oc.lazyLoad']);
第二步：使用config來(lái)配置路由跳轉(zhuǎn)
myapp.config(
function($stateProvider,$urlRouterProvider,$ocLazyLoadProvider,$httpProvider){
$stateProvider
.state('index', {//首頁(yè)
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');//后面這個(gè)就是進(jìn)入這個(gè)模板時(shí)候要加載進(jìn)來(lái)的js
}]
}
})
.state('userAgree',{//同意用戶協(xié)議頁(yè)面
url:"/userAgree",
templateUrl:basePath+'page/agreement.html'
})
.......
$urlRouterProvider.otherwise("/index");/*BproDtails*/
});
第三步：使用run來(lái)進(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("沒(méi)有登錄")
event.preventDefault();// 取消默認(rèn)跳轉(zhuǎn)行為
$("#my-modal-loading").modal('open');//開(kāi)啟加載中l(wèi)oading
// $state.go("login",{from:fromState.name,w:'notLogin'});//跳轉(zhuǎn)到登錄界面
}
});
});
以上這篇angular 未登錄狀態(tài)攔截路由跳轉(zhuǎn)的方法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了AngularJS的Cookies讀寫操作,結(jié)合實(shí)例形式分析了ngCookies模塊與get和put方法進(jìn)行cookie讀寫操作的相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2016-11-11
AngularJS實(shí)現(xiàn)星星等級(jí)評(píng)分功能
這篇文章主要為大家詳細(xì)介紹了AngularJS實(shí)現(xiàn)星星等級(jí)評(píng)分功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-09-09
angular + express 實(shí)現(xiàn)websocket通信
最近需要實(shí)現(xiàn)一個(gè)功能,后端通過(guò)TCP協(xié)議連接雷達(dá)硬件的控制器,前端通過(guò)websocket連接后端,當(dāng)控制器觸發(fā)消息的時(shí)候,把信息通知給所以前端,本文給的大家講解angular + express 實(shí)現(xiàn)websocket通信的思路,感興趣的朋友一起看看吧2023-09-09
Angularjs實(shí)現(xiàn)分頁(yè)和分頁(yè)算法的示例代碼
分頁(yè)是很多web應(yīng)用都會(huì)用到的，本篇文章主要介紹了Angularjs實(shí)現(xiàn)分頁(yè)和分頁(yè)算法的示例代碼，具有一定的參考價(jià)值，有興趣的可以了解一下。2016-12-12
Ionic + Angular.js實(shí)現(xiàn)驗(yàn)證碼倒計(jì)時(shí)功能的方法
驗(yàn)證碼倒計(jì)時(shí)這個(gè)功能相信對(duì)大家每個(gè)人來(lái)說(shuō)都不陌生，之前介紹了在Android中的實(shí)現(xiàn)方法，下面這篇文章主要給大家介紹了利用Ionic + Angular.js實(shí)現(xiàn)驗(yàn)證碼倒計(jì)時(shí)功能的相關(guān)資料，文中介紹的非常詳細(xì)，需要的朋友們下面來(lái)一起看看吧。2017-06-06
AngularJS $on、$emit和$broadcast的使用
本文主要介紹AngularJS $on、$emit和$broadcast的使用,這里整理了詳細(xì)的資料及簡(jiǎn)單示例代碼有興趣的小伙伴可以參考下2016-09-09
在AngularJS中主要使用$http服務(wù)與遠(yuǎn)程http服務(wù)器交互，本篇文章主要介紹了AngularJS中$http使用的簡(jiǎn)單介紹，非常具有實(shí)用價(jià)值，需要的朋友可以參考下。2017-03-03
AngularJS使用自定義指令替代ng-repeat的方法
這篇文章主要介紹了另一種即具有與ng-repeat一樣處理大量數(shù)據(jù)的綁定的功能，又具有超高性能的自定義方法，有需要的小伙伴們可以參考借鑒，下面來(lái)一起看看吧。2016-09-09
Angular項(xiàng)目中$scope.$apply()方法的使用詳解
這篇文章主要給大家介紹了關(guān)于Angular項(xiàng)目中$scope.$apply()方法使用的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用Angularjs具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面跟著小編一起來(lái)看看吧。2017-07-07
深入淺析angular和vue還有jquery的區(qū)別
vue是一個(gè)漸進(jìn)式的框架, 是一個(gè)輕量級(jí)的框架而angular是一個(gè)mvc框架, 各有千秋，下面小編通過(guò)本文給大家介紹angular和vue還有jquery的區(qū)別，感興趣的朋友一起看看吧2018-08-08