AngularJS实现用户登录状态判断的方法(Model添加拦截过滤器,路由增加限制)  更新时间:2016年12月12日 10:19:06   作者:qq_26702065   这篇文章主要介绍了AngularJS实现用户登录状态判断的方法,通过Model添加拦截过滤器,路由增加限制实现针对登陆状态的判断功能,需要的朋友可以参考下 本文实例讲述了AngularJS实现用户登录状态判断的方法。分享给大家供大家参考,具体如下: 使用AngularJS的单页面应用时,由于是本地路由在控制页面跳转,但是有的时候我们需要判断用户是否登录来判断用户是否能进入界面。 angularjs是mvc架构所以实现起来很容易也很灵活,我们只MainController里增加一个路由事件侦听并判断,这样就可以避免未登录用户直接输入路由地址来跳转到登录界面地址了 代码中的 $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’});//跳转到登录界面 } }); 另外还有用户已经登录,但是登录超时了,还有就是增加后台接口的判断来增强安全性。不能完全依靠本地逻辑 我们在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中哦 app.config(function ($httpProvider) { $httpProvider.interceptors.push(‘UserInterceptor’); }); 最后在controller中处理错误事件 $rootScope.$on(‘userIntercepted’,function(errorType){ // 跳转到登录界面,这里我记录了一个from,这样可以在登录后自动跳转到未登录之前的那个界面 $state.go(“login”,{from:$state.current.name,w:errorType}); }); 最后还可以在loginController中做更多的细节处理 // 如果用户已经登录了,则立即跳转到一个默认主页上去,无需再登录 if($rootScope.user.token){ $state.go($rootScope.defaultPage); return; } 另外在登录成功回调后还可以跳转到上一次界面,也就是上面记录的from var from = $stateParams[“from”]; $state.go(from && from != “login” ? from : $rootScope.defaultPage); 更多关于AngularJS相关内容感兴趣的读者可查看本站专题:《AngularJS入门与进阶教程》及《AngularJS MVC架构总结》 希望本文所述对大家AngularJS程序设计有所帮助。 您可能感兴趣的文章: 详解AngularJS中的filter过滤器用法 AngularJS的内置过滤器详解 详解AngularJS中自定义过滤器 AngularJS中的过滤器使用详解 使用AngularJS创建自定义的过滤器的方法 AngularJS过滤器filter用法总结 详解AngularJS中$filter过滤器使用(自定义过滤器) AngularJS 过滤器(自带和自建)详解 Angularjs 双向绑定时字符串的转换成数字类型的问题 Angular.js 实现数字转换汉字实例代码 Angular使用过滤器uppercase/lowercase实现字母大小写转换功能示例 AngularJS 登录状态 Model 过滤器 路由 相关文章 简单说说angular.json文件的使用 这篇文章主要介绍了简单说说angular.json文件的使用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2018-10-10 angularjs的一些优化小技巧 这篇文章主要介绍了angularjs的一些优化小技巧,本文总结了5种优化技巧,如一次绑定、尽可能少调用 ng-repeat、尽量在指令里写原生语法、页面内尽量少用filters等,需要的朋友可以参考下 2014-12-12 浅谈AngularJs指令之scope属性详解 下面小编就为大家带来一篇浅谈AngularJs指令之scope属性详解。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2016-10-10 AngularJS 霸道的过滤器小结 本篇文章主要介绍了AngularJS 霸道的过滤器小结,在实际操作中,我们需要对统一数据源进行多次转换,本文详细讨论有关过滤器的用法 。 2017-04-04 angularjs点击图片放大实现上传图片预览 这篇文章主要为大家详细介绍了angularjs点击图片放大实现上传图片预览的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 2017-02-02 AngularJS框架的ng-app指令与自动加载实现方法分析 这篇文章主要介绍了AngularJS框架的ng-app指令与自动加载实现方法,结合实例形式分析了ng-app指令的功能及自动加载机制的实现技巧,需要的朋友可以参考下 2017-01-01 详解angularjs结合pagination插件实现分页功能 本篇文章主要介绍了详解angularjs结合pagination插件实现分页功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。 2017-02-02 Angular中ng-bind和ng-model的区别实例详解 这篇文章主要介绍了Angular中ng-bind和ng-model的区别实例详解的相关资料,需要的朋友可以参考下 2017-04-04 angular2中router路由跳转navigate的使用与刷新页面问题详解 这篇文章主要给大家介绍了angular2中router路由跳转navigate的使用与刷新页面问题的相关资料,文中介绍的非常详细,对大家具有一定的参考学习价值,需要的朋友们下面来一起看看吧。 2017-05-05 详解AngularJS中$http缓存以及处理多个$http请求的方法 $http 是 AngularJS 中的一个核心服务,用于读取远程服务器的数据,通过本文给大家介绍AngularJS中$http缓存以及处理多个$http请求的方法,希望的朋友一起学习吧 2016-02-02 最新评论

本文实例讲述了AngularJS实现用户登录状态判断的方法。分享给大家供大家参考,具体如下:

使用AngularJS的单页面应用时,由于是本地路由在控制页面跳转,但是有的时候我们需要判断用户是否登录来判断用户是否能进入界面。

angularjs是mvc架构所以实现起来很容易也很灵活,我们只MainController里增加一个路由事件侦听并判断,这样就可以避免未登录用户直接输入路由地址来跳转到登录界面地址了

代码中的 $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'});//跳转到登录界面
  }
});

另外还有用户已经登录,但是登录超时了,还有就是增加后台接口的判断来增强安全性。不能完全依靠本地逻辑

我们在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中哦

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

最后在controller中处理错误事件

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

最后还可以在loginController中做更多的细节处理

// 如果用户已经登录了,则立即跳转到一个默认主页上去,无需再登录
if($rootScope.user.token){
  $state.go($rootScope.defaultPage);
  return;
}

另外在登录成功回调后还可以跳转到上一次界面,也就是上面记录的from

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

更多关于AngularJS相关内容感兴趣的读者可查看本站专题:《AngularJS入门与进阶教程》及《AngularJS MVC架构总结》

希望本文所述对大家AngularJS程序设计有所帮助。

您可能感兴趣的文章:

  • 详解AngularJS中的filter过滤器用法
  • AngularJS的内置过滤器详解
  • 详解AngularJS中自定义过滤器
  • AngularJS中的过滤器使用详解
  • 使用AngularJS创建自定义的过滤器的方法
  • AngularJS过滤器filter用法总结
  • 详解AngularJS中$filter过滤器使用(自定义过滤器)
  • AngularJS 过滤器(自带和自建)详解
  • Angularjs 双向绑定时字符串的转换成数字类型的问题
  • Angular.js 实现数字转换汉字实例代码
  • Angular使用过滤器uppercase/lowercase实现字母大小写转换功能示例
张贴在3