angular利用ui-router进行登录检查
SAP都会有这个问题,session过期或者页面被刷新的情况下应该进入登录页.
监听ui-router的satte事件可以实现当state切换的时候检查登录情况
监听state变化处理页面刷新
//添加事件监听
$rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams) {
if (toState.name == 'register') return; // 如果是进入登录界面则允许
// 如果用户不存在
if (!$rootScope.session || !$rootScope.seccion.session_id) {
event.preventDefault(); // 取消默认跳转行为
$state.go("register", { from: fromState.name, w: 'notLogin' }); //跳转到登录界面
}
});
HttpProvider的Interceptor处理过期session
intercepto拦截器,可以处理所有的请求结果,能够实现:基于状态码统一的错误处理
如何注册interceptor:https://docs.angularjs.org/api/ng/service/$http#interceptors
//register interceptor as sercice
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);
}
};
}]);
//push interceptor to interceptor list
app.config(function ($httpProvider) {
$httpProvider.interceptors.push('UserInterceptor');
});
$rootScope.$on('userIntercepted',function(errorType){
// 跳转到登录界面,这里我记录了一个from,这样可以在登录后自动跳转到未登录之前的那个界面
$state.go("login",{from:$state.current.name,w:errorType});
});
相关
UI-State Events
$stateChangeCancel
$stateChangeError
$stateChangeStart
$stateChangeSuccess
$stateNotFound
Directive Hooks
详情:https://docs.angularjs.org/api/ng/service/$compile#life-cycle-hooks
angular.module('do-check-module', [])
.component('app', {
template:
'Month: <input ng-model="$ctrl.month" ng-change="$ctrl.updateDate()">' +
'Date: {{ $ctrl.date }}' +
'<test date="$ctrl.date"></test>',
controller: function() {
this.date = new Date();
this.month = this.date.getMonth();
this.updateDate = function() {
this.date.setMonth(this.month);
};
}
})
.component('test', {
bindings: { date: '<' },
template:
'<pre>{{ $ctrl.log | json }}</pre>',
controller: function() {
var previousValue;
this.log = [];
//hook here
this.$doCheck = function() {
var currentValue = this.date && this.date.valueOf();
if (previousValue !== currentValue) {
this.log.push('doCheck: date mutated: ' + this.date);
previousValue = currentValue;
}
};
}
});
参考:
https://ui-router.github.io/docs/latest/modules/ng1_state_events.html
https://github.com/angular-ui/ui-router/wiki#state-change-events
http://www.brafox.com/post/2015/javascript/angularjs/angularjs-router-interceptor.html
angular利用ui-router登录检查的更多相关文章
-
angular 的ui.router 定义不同的state 对应相同的url
Angular UI Router: Different states with same URL? The landing page of my app has two states: home-p ...
-
angular中的 登录检查 和 过期Session清理
angular利用ui-router进行登录检查 SAP都会有这个问题,session过期或者页面被刷新的情况下应该进入登录页. 监听ui-router的satte事件可以实现当state切换的时候检 ...
-
AngularJS 使用 UI Router 实现表单向导
Today we will be using AngularJS and the great UI Router and the Angular ngAnimate module to create ...
-
angular : $location &; $state(UI router)的关系
次序:angular 的 location会先跑 $rootScope.$on("$locationChangeStart", function (scope, newUrl, o ...
-
angular ui.router 路由传参数
angular已经用了一段时间了,最近在做路由,做一下笔记. 路由跳转的时候进行穿参 ui.router方式 <a ui-sref="edit({id:5})"> 编辑 ...
-
angular路由——ui.route
angular路由 使用案例 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...
-
【原创】ui.router源码解析
Angular系列文章之angular路由 路由(route),几乎所有的MVC(VM)框架都应该具有的特性,因为它是前端构建单页面应用(SPA)必不可少的组成部分. 那么,对于angular而言,它 ...
-
ngRoute 与ui.router区别
angular路由 路由 (route) ,几乎所有的 MVC(VM) 框架都应该具有的特性,因为它是前端构建单页面应用 (SPA) 必不可少的组成部分. 那么,对于 angular 而言,它自然也有 ...
-
Angular.js之Router学习笔记
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
随机推荐
-
XACML学习
学习的网站: http://www.cinlk.com/2015/07/27/xacml/ http://www.cinlk.com/2015/08/22/swiftabac/ http://blog ...
-
《大道至简》第一章读后感--JAVA语言伪代码形式
import.java.大道至简.*; //一·愚公移山 import.java.愚公移山.*; public class YuGongYiShan { //原始需求:惩山北之塞,出入之迂 //项目沟 ...
-
[转]VB Winsock 控件TCP与UDP连接实例
[-] 可能的用途 选择通讯协议 协议的设置 确定计算机的名称 TCP 连接初步 接受多个连接请求 UDP 初步 关于 Bind 方法 利用 WinSock 控件可以与远程计算机建立连接,并通过用 ...
-
java读取邮件
package com.zz.mail; import java.io.FileNotFoundException; import java.io.FileOutputStream; import j ...
-
Java Executor并发框架(二)剖析ThreadPoolExecutor运行过程
上一篇从整体上介绍了Executor接口,从上一篇我们知道了Executor框架的最顶层实现是ThreadPoolExecutor类,Executors工厂类中提供的newScheduledThrea ...
-
AndroidStudyDemo之Android4.x介绍
Android4.x 思维导图 作者:李旺成 时间:2016年4月7日 AndroidStudyDemo 系列篇章开始了!!! AndroidStudyDemo 你值得拥有AndroidStudyDe ...
-
【UML 建模】UML建模语言入门 -- 静态图详解 类图 对象图 包图 静态图建模实战
发现个好东西思维导图, 最近开始用MindManager整理博客 . 作者 :万境绝尘 转载请注明出处 : http://blog.csdn.net/shulianghan/article/deta ...
-
java 发送 mail 纯文本发送和html格式发送
一:需要引入mail maven jar包 <!--邮件发送包--> <dependency> <groupId>javax.mail</groupId> ...
-
python开发day03
一.常见的数据类型 1. int ==> 整数. 主要⽤用来进⾏行行数学运算 \ (常见的操作有+-*%) a.bit_length() a= # 10进制 二进制 100 print(a.b ...
-
网络I/O模型--07Netty基础
Netty 是由 JBOSS 提供的一个 Java 开源框架. Netty 提供异步的.事件驱动的网络应用程序框架和工具 ,用以快速开发高性能 . 高可靠性的网络服务器和客户端程序. Net ...