AngularJS實(shí)現(xiàn)用戶登錄狀態(tài)判斷的方法(Model添加攔截過濾器,路由增加限制)
本文實(shí)例講述了AngularJS實(shí)現(xiàn)用戶登錄狀態(tài)判斷的方法。分享給大家供大家參考，具體如下：
使用AngularJS的單頁面應(yīng)用時，由于是本地路由在控制頁面跳轉(zhuǎn)，但是有的時候我們需要判斷用戶是否登錄來判斷用戶是否能進(jìn)入界面。
angularjs是mvc架構(gòu)所以實(shí)現(xiàn)起來很容易也很靈活，我們只MainController里增加一個路由事件偵聽并判斷，這樣就可以避免未登錄用戶直接輸入路由地址來跳轉(zhuǎn)到登錄界面地址了
代碼中的 $rootScope.user是登錄后把用戶信息放到了全局rootScope上，方便其他地方使用，$rootScope.defaultPage也是默認(rèn)主頁面，初始化的時候?qū)懰赖絩ootScope里的。
$rootScope.$on('$stateChangeStart',function(event, toState, toParams, fromState, fromParams){
if(toState.name=='login')return;// 如果是進(jìn)入登錄界面則允許
// 如果用戶不存在
if(!$rootScope.user || !$rootScope.user.token){
event.preventDefault();// 取消默認(rèn)跳轉(zhuǎn)行為
$state.go("login",{from:fromState.name,w:'notLogin'});//跳轉(zhuǎn)到登錄界面
}
});
另外還有用戶已經(jīng)登錄，但是登錄超時了，還有就是增加后臺接口的判斷來增強(qiá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中做更多的細(xì)節(jié)處理
// 如果用戶已經(jīng)登錄了，則立即跳轉(zhuǎn)到一個默認(rè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入門與進(jìn)階教程》及《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 實(shí)現(xiàn)數(shù)字轉(zhuǎn)換漢字實(shí)例代碼
- Angular使用過濾器uppercase/lowercase實(shí)現(xiàn)字母大小寫轉(zhuǎn)換功能示例
相關(guān)文章
angular中的http攔截器Interceptors的實(shí)現(xiàn)
本篇文章主要介紹了angular中的http攔截器Interceptors的實(shí)現(xiàn)的相關(guān)資料,具有一定的參考價值，感興趣的小伙伴們可以參考一下。2017-02-02
AngularJS使用$http配置對象方式與服務(wù)端交互方法
今天小編就為大家分享一篇AngularJS使用$http配置對象方式與服務(wù)端交互方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
詳談Angular 2+ 的表單（一）之模板驅(qū)動型表單
這篇文章主要介紹了Angular 2+ 的表單（一）之模板驅(qū)動型表單,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-04-04
AngularJS入門教程之?dāng)?shù)據(jù)綁定原理詳解
這篇文章主要介紹了AngularJS數(shù)據(jù)綁定原理,較為詳細(xì)的分析了AngularJS數(shù)據(jù)綁定的原理、使用技巧與相關(guān)注意事項(xiàng),需要的朋友可以參考下2016-11-11
本篇文章主要介紹了angular組件繼承的實(shí)現(xiàn)方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-02-02
AngularJS中ng-options實(shí)現(xiàn)下拉列表的數(shù)據(jù)綁定方法
今天小編就為大家分享一篇AngularJS中ng-options實(shí)現(xiàn)下拉列表的數(shù)據(jù)綁定方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
angularjs創(chuàng)建彈出框?qū)崿F(xiàn)拖動效果
這篇文章主要為大家詳細(xì)介紹了angularjs創(chuàng)建彈出框?qū)崿F(xiàn)拖動效果的相關(guān)資料，angularjs modal模態(tài)框創(chuàng)建可拖動的指令，感興趣的小伙伴們可以參考一下2016-01-01
這篇文章主要為大家介紹了詳解如何在Angular中引入Mock.js實(shí)現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-04-04
這篇文章主要介紹了AngularJs 動態(tài)加載模塊和依賴方法的相關(guān)資料,需要的朋友可以參考下2016-09-09
Angular基于Constructor?Parameter的依賴注入方式詳解
這篇文章主要為大家介紹了Angular基于Constructor?Parameter的依賴注入方式詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-11-11