AngularJS实现用户登录状态判断的方法(Model添加拦截过滤器,路由增加限制)


Posted in Javascript onDecember 12, 2016

本文实例讲述了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程序设计有所帮助。

Javascript 相关文章推荐
在网页中控制wmplayer播放器
Jul 01 Javascript
javascript下查找父节点的简单方法
Aug 13 Javascript
DOM 脚本编程中的兄弟节点
Oct 31 Javascript
js获取html参数及向swf传递参数应用介绍
Feb 18 Javascript
addEventListener 的用法示例介绍
May 07 Javascript
谈一谈JS消息机制和事件机制的理解
Apr 14 Javascript
JavaScript获取当前时间向前推三个月的方法示例
Feb 04 Javascript
js实现网页定位导航功能
Mar 07 Javascript
详解Node.js项目APM监控之New Relic
May 12 Javascript
vue loadmore组件上拉加载更多功能示例代码
Jul 19 Javascript
浅谈AngularJS中$http服务的简单用法
May 15 Javascript
浅谈webpack构建工具配置和常用插件总结
May 11 Javascript
jquery实现瀑布流效果 jquery下拉加载新数据
Dec 12 #Javascript
AngularJS封装指令方法详解
Dec 12 #Javascript
JS+Canvas实现的俄罗斯方块游戏完整实例
Dec 12 #Javascript
最好用的Bootstrap fileinput.js文件上传组件
Dec 12 #Javascript
jQuery Ajax File Upload实例源码
Dec 12 #Javascript
VueJs与ReactJS和AngularJS的异同点
Dec 12 #Javascript
layer实现弹窗提交信息
Dec 12 #Javascript
You might like
php jsonp单引号转义
2014/11/23 PHP
PHP中抽象类、接口的区别与选择分析
2016/03/29 PHP
php定期拉取数据对比方法实例
2019/09/22 PHP
Javascript 表单之间的数据传递代码
2008/12/04 Javascript
JavaScript入门教程(12) js对象化编程
2009/01/31 Javascript
把html页面的部分内容保存成新的html文件的jquery代码
2009/11/12 Javascript
jQuery 遍历json数组的实现代码
2020/09/22 Javascript
jquery.tmpl JQuery模板插件
2011/10/10 Javascript
文本框根据输入内容自适应高度的代码
2011/10/24 Javascript
js中parseInt函数浅谈
2013/07/31 Javascript
jQuery动画与特效详解
2015/02/01 Javascript
JS模式之简单的订阅者和发布者模式完整实例
2015/06/30 Javascript
JavaScript必知必会(七)js对象继承
2016/06/08 Javascript
JavaScript编码风格指南(中文版)
2016/08/26 Javascript
Vue input控件通过value绑定动态属性及修饰符的方法
2017/05/03 Javascript
VUE 使用中踩过的坑
2018/02/08 Javascript
解决Vue2.0中使用less给元素添加背景图片出现的问题
2018/09/03 Javascript
解决微信小程序云开发中获取数据库的内容为空的方法
2019/05/15 Javascript
通过说明与示例了解js五种设计模式
2019/06/17 Javascript
关于Layui Table隐藏列问题
2019/09/16 Javascript
vue组件系列之TagsInput详解
2020/05/14 Javascript
Vue 如何使用props、emit实现自定义双向绑定的实现
2020/06/05 Javascript
解决elementUI 切换tab后 el_table 固定列下方多了一条线问题
2020/07/19 Javascript
Python实例之wxpython中Frame使用方法
2014/06/09 Python
Python浅复制中对象生存周期实例分析
2018/04/02 Python
使用Python向C语言的链接库传递数组、结构体、指针类型的数据
2019/01/29 Python
Python 多线程搜索txt文件的内容,并写入搜到的内容(Lock)方法
2019/08/23 Python
python实现超市商品销售管理系统
2019/10/25 Python
Python通过yagmail实现发送邮件代码解析
2020/10/27 Python
详解Open Folder as PyCharm Project怎么添加的方法
2020/12/29 Python
HTML5 drag和drop具体使用详解
2021/01/18 HTML / CSS
VICHY薇姿美国官方网站:欧洲药房第一的抗衰老品牌
2017/11/22 全球购物
澳大利亚墨尔本的在线时装店:LORETA
2018/09/14 全球购物
婚庆公司的创业计划书
2014/01/22 职场文书
新任教师自我鉴定
2014/02/24 职场文书
个人年终总结范文
2015/03/09 职场文书