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 - HTML的request类
Jul 15 Javascript
window.js 主要包含了页面的一些操作
Dec 23 Javascript
JS 各种网页尺寸判断实例方法
Apr 18 Javascript
三种动态加载js的jquery实例代码另附去除js方法
Apr 30 Javascript
js 实现的可折叠留言板(附源码下载)
Jul 01 Javascript
10分钟掌握XML、JSON及其解析
Dec 06 Javascript
IE8兼容Jquery.validate.js的问题
Dec 01 Javascript
jQuery插件echarts设置折线图中折线线条颜色和折线点颜色的方法
Mar 03 Javascript
jQuery实现的手动拖动控制进度条效果示例【测试可用】
Apr 18 jQuery
jQuery pjax 应用简单示例
Sep 20 jQuery
mpvue 单文件页面配置详解
Dec 02 Javascript
JavaScript:ES2019 的新特性(译)
Aug 08 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 编写的 25个游戏脚本
2009/05/11 PHP
memcached 和 mysql 主从环境下php开发代码详解
2010/05/16 PHP
php SQL Injection with MySQL
2011/02/27 PHP
PHP运行时强制显示出错信息的代码
2011/04/20 PHP
destoon实现首页显示供应、企业、资讯条数的方法
2014/07/15 PHP
PHP 生成微信红包代码简单
2016/03/25 PHP
在 PHP 和 Laravel 中使用 Traits的方法
2019/11/13 PHP
基于jquery的回到页面顶部按钮
2011/06/27 Javascript
通过jQuery源码学习javascript(二)
2012/12/27 Javascript
JavaScript 实现类的多种方法实例
2013/05/01 Javascript
谈一谈bootstrap响应式布局
2016/05/23 Javascript
基于jQuery实现Tabs选项卡自定义插件
2016/11/21 Javascript
bootstrap select插件封装成Vue2.0组件
2017/04/17 Javascript
Angular 4依赖注入学习教程之FactoryProvider配置依赖对象(五)
2017/06/04 Javascript
Angular4 中常用的指令入门总结
2017/06/12 Javascript
五步轻松实现JavaScript HTML时钟效果
2020/03/25 Javascript
Vue.js项目中管理每个页面的头部标签的两种方法
2018/06/25 Javascript
angularJs中$scope数据序列化的实例
2018/09/30 Javascript
JavaScript实现点击自制菜单效果
2021/02/02 Javascript
Python 抓取动态网页内容方案详解
2014/12/25 Python
python修改字典内key对应值的方法
2015/07/11 Python
python先序遍历二叉树问题
2017/11/10 Python
python中必要的名词解释
2019/11/20 Python
Python实现简单的猜单词小游戏
2020/10/28 Python
html5 canvas实现圆形时钟代码分享
2013/12/25 HTML / CSS
英国潮流网站:END.(全球免邮)
2017/01/16 全球购物
初中科学教学反思
2014/01/21 职场文书
安全生产活动月方案
2014/03/09 职场文书
司机岗位职责说明书
2014/07/29 职场文书
食品安全承诺书范文
2014/08/29 职场文书
审计局2014法制宣传日活动总结
2014/11/01 职场文书
行政人事专员岗位职责
2015/04/07 职场文书
政工师工作总结2015
2015/05/26 职场文书
使用css样式设计一个简单的html登陆界面的实现
2021/03/30 HTML / CSS
用Python制作灯光秀短视频的思路详解
2021/04/13 Python
Python中可变和不可变对象的深入讲解
2021/08/02 Python