AngularJS實現(xiàn)用戶登錄狀態(tài)判斷的方法(Model添加攔截過濾器,路由增加限制)
本文實例講述了AngularJS實現(xiàn)用戶登錄狀態(tài)判斷的方法。分享給大家供大家參考,具體如下:
使用AngularJS的單頁面應(yīng)用時,由于是本地路由在控制頁面跳轉(zhuǎn),但是有的時候我們需要判斷用戶是否登錄來判斷用戶是否能進入界面。
angularjs是mvc架構(gòu)所以實現(xiàn)起來很容易也很靈活,我們只MainController里增加一個路由事件偵聽并判斷,這樣就可以避免未登錄用戶直接輸入路由地址來跳轉(zhuǎn)到登錄界面地址了
代碼中的 $rootScope.user是登錄后把用戶信息放到了全局rootScope上,方便其他地方使用,$rootScope.defaultPage也是默認主頁面,初始化的時候?qū)懰赖絩ootScope里的。
$rootScope.$on('$stateChangeStart',function(event, toState, toParams, fromState, fromParams){ if(toState.name=='login')return;// 如果是進入登錄界面則允許 // 如果用戶不存在 if(!$rootScope.user || !$rootScope.user.token){ event.preventDefault();// 取消默認跳轉(zhuǎn)行為 $state.go("login",{from:fromState.name,w:'notLogin'});//跳轉(zhuǎn)到登錄界面 } });
另外還有用戶已經(jīng)登錄,但是登錄超時了,還有就是增加后臺接口的判斷來增強安全性。不能完全依靠本地邏輯
我們在model里面增加一個用戶攔截器,在rensponseError中判斷錯誤碼,拋出事件讓Contoller或view來處理
app.factory('UserInterceptor', ["$q","$rootScope",function ($q,$rootScope) { return { request:function(config){ config.headers["TOKEN"] = $rootScope.user.token; return config; }, responseError: function (response) { var data = response.data; // 判斷錯誤碼,如果是未登錄 if(data["errorCode"] == "500999"){ // 清空用戶本地token存儲的信息,如果 $rootScope.user = {token:""}; // 全局事件,方便其他view獲取該事件,并給以相應(yīng)的提示或處理 $rootScope.$emit("userIntercepted","notLogin",response); } // 如果是登錄超時 if(data["errorCode"] == "500998"){ $rootScope.$emit("userIntercepted","sessionOut",response); } return $q.reject(response); } }; }]);
別忘了要注冊攔截器到angularjs的config中哦
app.config(function ($httpProvider) { $httpProvider.interceptors.push('UserInterceptor'); });
最后在controller中處理錯誤事件
$rootScope.$on('userIntercepted',function(errorType){ // 跳轉(zhuǎn)到登錄界面,這里我記錄了一個from,這樣可以在登錄后自動跳轉(zhuǎn)到未登錄之前的那個界面 $state.go("login",{from:$state.current.name,w:errorType}); });
最后還可以在loginController中做更多的細節(jié)處理
// 如果用戶已經(jīng)登錄了,則立即跳轉(zhuǎn)到一個默認主頁上去,無需再登錄 if($rootScope.user.token){ $state.go($rootScope.defaultPage); return; }
另外在登錄成功回調(diào)后還可以跳轉(zhuǎn)到上一次界面,也就是上面記錄的from
var from = $stateParams["from"]; $state.go(from && from != "login" ? from : $rootScope.defaultPage);
更多關(guān)于AngularJS相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《AngularJS入門與進階教程》及《AngularJS MVC架構(gòu)總結(jié)》
希望本文所述對大家AngularJS程序設(shè)計有所幫助。
- 詳解AngularJS中的filter過濾器用法
- AngularJS的內(nèi)置過濾器詳解
- 詳解AngularJS中自定義過濾器
- AngularJS中的過濾器使用詳解
- 使用AngularJS創(chuàng)建自定義的過濾器的方法
- AngularJS過濾器filter用法總結(jié)
- 詳解AngularJS中$filter過濾器使用(自定義過濾器)
- AngularJS 過濾器(自帶和自建)詳解
- Angularjs 雙向綁定時字符串的轉(zhuǎn)換成數(shù)字類型的問題
- Angular.js 實現(xiàn)數(shù)字轉(zhuǎn)換漢字實例代碼
- Angular使用過濾器uppercase/lowercase實現(xiàn)字母大小寫轉(zhuǎn)換功能示例
相關(guān)文章
Angularjs Ng_repeat中實現(xiàn)復選框選中并顯示不同的樣式方法
今天小編就為大家分享一篇Angularjs Ng_repeat中實現(xiàn)復選框選中并顯示不同的樣式方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09angularjs實現(xiàn)多選框分段全選效果實現(xiàn)
這篇文章主要為大家介紹了angularjs實現(xiàn)多選框分段全選效果實現(xiàn)詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-06-06AngularJS利用Controller完成URL跳轉(zhuǎn)
本文的主要內(nèi)容是介紹在AngularJS中怎樣利用Controller實現(xiàn)URL跳轉(zhuǎn),本文給出了實例代碼,簡單明了,有需要的可以參考學習。2016-08-08Angular.js前臺傳list數(shù)組由后臺spring MVC接收數(shù)組示例代碼
這篇文章主要給大家介紹了關(guān)于Angular.js前臺傳list數(shù)組之后,由后臺spring MVC接收數(shù)組的相關(guān)資料,文中通過示例代碼介紹的非常詳細,對大家具有一定的參考學習價值,需要的朋友們下面跟著小編來一起學習學習吧。2017-07-07angular4 JavaScript內(nèi)存溢出問題
本篇文章主要介紹了angular4 JavaScript內(nèi)存溢出問題,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-03-03