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 相关文章推荐
使Ext的Template可以解析二层的json数据的方法
Dec 22 Javascript
JavaScript面向对象程序设计三 原型模式(上)
Dec 21 Javascript
动态显示可输入的字数提示还可以输入的字数
Apr 01 Javascript
JavaScript实现添加、查找、删除元素
Jul 02 Javascript
基于BootStrap的图片轮播效果展示实例代码
May 23 Javascript
微信小程序 navbar实例详解
May 11 Javascript
Vue.js实现实例搜索应用功能详细代码
Aug 24 Javascript
jQuery实现的粘性滚动导航栏效果实例【附源码下载】
Oct 19 jQuery
VUE-Table上绑定Input通过render实现双向绑定数据的示例
Aug 27 Javascript
JS集合set类的实现与使用方法示例
Feb 01 Javascript
js实现鼠标拖拽缩放div实例代码
Mar 25 Javascript
Vue基本使用之对象提供的属性功能
Apr 30 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 实现进制转换(二进制、八进制、十六进制)互相转换实现代码
2010/10/22 PHP
php设计模式 Adapter(适配器模式)
2011/06/26 PHP
PHP 第二节 数据类型之字符串类型
2012/04/28 PHP
PHP进行批量任务处理不超时的解决方法
2016/07/11 PHP
js 动态添加标签(新增一行,其实很简单,就是几个函数的应用)
2009/03/26 Javascript
基于jquery实现的类似百度搜索的输入框自动完成功能
2011/08/23 Javascript
js中判断数字\字母\中文的正则表达式 (实例)
2012/06/29 Javascript
关于js new Date() 出现NaN 的分析
2012/10/23 Javascript
Javascript基础 函数“重载” 详细介绍
2013/10/25 Javascript
JS实现CheckBox复选框全选全不选功能
2015/05/06 Javascript
javascript实现拖放效果
2015/12/16 Javascript
jquery实现一个简单的表单验证实例
2016/03/30 Javascript
nodejs multer实现文件上传与下载
2017/05/10 NodeJs
vue 中自定义指令改变data中的值
2017/06/02 Javascript
js获取地址栏参数的两种方法
2017/06/27 Javascript
基于jquery实现多级菜单效果
2017/07/25 jQuery
JS一个简单的注册页面实例
2017/09/05 Javascript
vue综合组件间的通信详解
2017/11/06 Javascript
利用JS测试目标网站的打开响应速度
2017/12/01 Javascript
Vue 实现从文件中获取文本信息的方法详解
2019/10/16 Javascript
解决Ant Design Modal内嵌Form表单initialValue值不动态更新问题
2020/10/29 Javascript
python环形单链表的约瑟夫问题详解
2018/09/27 Python
Python 忽略warning的输出方法
2018/10/18 Python
Python寻找两个有序数组的中位数实例详解
2018/12/05 Python
python 列表中[ ]中冒号‘:’的作用
2019/04/30 Python
Tensorflow: 从checkpoint文件中读取tensor方式
2020/02/10 Python
python脚本实现mp4中的音频提取并保存在原目录
2020/02/27 Python
Python实现七个基本算法的实例代码
2020/10/08 Python
详解html5 canvas常用api总结(二)--绘图API
2016/12/14 HTML / CSS
canvas环形倒计时组件的示例代码
2018/06/14 HTML / CSS
英国复古服装购物网站:Collectif
2019/10/30 全球购物
经典团队口号大全
2014/06/21 职场文书
县政府领导班子四风问题对照检查材料思想汇报
2014/09/26 职场文书
导游词之镇江西津古渡
2019/11/06 职场文书
《中国机长》观后感:敬畏生命,敬畏职责
2019/11/12 职场文书
vue如何清除浏览器历史栈
2022/05/25 Vue.js