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