angularjs给Model添加拦截过滤器,路由增长限制，实现用户登陆状态判断

时间 2019-11-07

标签 angularjs model 添加拦截过滤器路由增长限制实现用户登陆状态判断栏目 AngularJS 繁體版

原文原文链接

使用angularjs的但页面应用时，因为是本地路由在控制页面跳转，可是有的时候咱们须要判断用户是否登陆来判断用户是否能进入界面。angularjs

angularjs是mvc架构因此实现起来很容易也很灵活，咱们只MainController里增长一个路由事件侦听并判断，这样就能够避免未登陆用户直接输入路由地址来跳转到登陆界面地址了web

代码中的 $rootScope.user是登陆后把用户信息放到了全局rootScope上，方便其余地方使用，$rootScope.defaultPage也是默认主页面，初始化的时候写死到rootScope里的。安全

$rootScope.$on('$stateChangeStart',function(event, toState, toParams, fromState, fromParams){
 if(toState.name=='login')return;// 若是是进入登陆界面则容许
 // 若是用户不存在
 if(!$rootScope.user || !$rootScope.user.token){
 event.preventDefault();// 取消默认跳转行为
 $state.go("login",{from:fromState.name,w:'notLogin'});//跳转到登陆界面
 }
});

另外还有用户已经登陆，可是登陆超时了，还有就是增长后台接口的判断来加强安全性。不能彻底依靠本地逻辑session

咱们在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获取该事件，并给以相应的提示或处理
                $rootScope.$emit("userIntercepted","notLogin",response);
            }
 // 若是是登陆超时
 if(data["errorCode"] == "500998"){
                $rootScope.$emit("userIntercepted","sessionOut",response);
            }
            return $q.reject(response);
        }
    };
}]);

别忘了要注册拦截器到angularjs的config中哦mvc

1
2
3

app.config(function ($httpProvider) {
    $httpProvider.interceptors.push('UserInterceptor');
});

最后在controller中处理错误事件
app

$rootScope.$on('userIntercepted',function(errorType){
 // 跳转到登陆界面，这里我记录了一个from，这样能够在登陆后自动跳转到未登陆以前的那个界面
 $state.go("login",{from:$state.current.name,w:errorType});
});

最后还能够在loginController中作更多的细节处理ide

// 若是用户已经登陆了，则当即跳转到一个默认主页上去，无需再登陆
if($rootScope.user.token){
 $state.go($rootScope.defaultPage);
 return;
}

另外在登陆成功回调后还能够跳转到上一次界面，也就是上面记录的from
spa

1 2	var from = $stateParams["from"]; $state.go(from && from != "login" ? from : $rootScope.defaultPage);