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 相关文章推荐
javascript编程起步(第四课)
Feb 27 Javascript
javascript 写类方式之五
Jul 05 Javascript
Jquery选中或取消radio示例
Sep 29 Javascript
js实现搜索框关键字智能匹配代码
Mar 26 Javascript
学习使用jquery iScroll.js移动端滚动条插件
Mar 24 Javascript
jQuery实现级联下拉框实战(5)
Feb 08 Javascript
JavaScript数据结构之广义表的定义与表示方法详解
Apr 12 Javascript
关于js陀螺仪的理解分析
Apr 11 Javascript
JS实现的贪吃蛇游戏案例详解
May 01 Javascript
vue+elementUi图片上传组件使用详解
Aug 20 Javascript
深入理解redux之compose的具体应用
Jan 12 Javascript
微信小程序基于高德地图API实现天气组件(动态效果)
Oct 22 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 常见郁闷问题答解
2006/11/25 PHP
PHP 中执行排序与 MySQL 中排序
2009/04/21 PHP
PHP实现变色验证码实例
2014/01/06 PHP
php实现模拟登陆方正教务系统抓取课表
2015/05/19 PHP
php使用curl通过代理获取数据的实现方法
2016/05/16 PHP
js类型检查实现代码
2010/10/29 Javascript
JS获取下拉列表所选中的TEXT和Value的实现代码
2014/01/11 Javascript
eclipse导入jquery包后报错的解决方法
2014/02/17 Javascript
javascript实现锁定网页、密码解锁效果(类似系统屏幕保护效果)
2014/08/15 Javascript
vue一步步实现alert功能
2017/07/05 Javascript
对于input 框限定输入值为浮点型的js代码
2017/09/25 Javascript
React全家桶环境搭建过程详解
2018/05/18 Javascript
Vue项目引进ElementUI组件的方法
2018/11/11 Javascript
基于Vue和Element-Ui搭建项目的方法
2019/09/06 Javascript
Layui Form 自定义验证的实例代码
2019/09/14 Javascript
JS实现扫码枪扫描二维码功能
2020/01/03 Javascript
JS如何定义用字符串拼接的变量
2020/07/11 Javascript
[05:00]第二届DOTA2亚洲邀请赛主赛事第三天比赛集锦.mp4
2017/04/04 DOTA
Mac下Supervisor进程监控管理工具的安装与配置
2014/12/16 Python
在Python中使用dict和set方法的教程
2015/04/27 Python
深入了解Python数据类型之列表
2016/06/24 Python
一篇文章快速了解Python的GIL
2018/01/12 Python
python计算日期之间的放假日期
2018/06/05 Python
Python实现在某个数组中查找一个值的算法示例
2018/06/27 Python
Python Dataframe常见索引方式详解
2020/05/27 Python
法国家具及室内配件店:home24
2017/01/21 全球购物
后备干部考察材料
2014/02/12 职场文书
年度考核自我鉴定
2014/03/19 职场文书
机械电子工程专业自荐书
2014/06/10 职场文书
班主任2015新年寄语
2014/12/08 职场文书
2016年植树节红领巾广播稿
2015/12/17 职场文书
《蟋蟀的住宅》教学反思
2016/02/17 职场文书
2019新员工心得体会
2019/06/25 职场文书
python - asyncio异步编程
2021/04/06 Python
Go语言实现Snowflake雪花算法
2021/06/08 Golang
CSS Transition通过改变Height实现展开收起元素
2021/08/07 HTML / CSS