Angular 安全验证

在开发的过程当中，遇到身份验证的问题，若是在不登陆的状况下直接访问项目的地址，怎么对用户的身份进行验证？常见的处理是：若是没有读取到用户的登陆信息，则页面自动转向登陆页面，那么做为开发人员，怎么实现此需求？目前据我所知的解决方案有两种。第一种是用ui-router提供的$stateChangeStart对于发生路由转换时进行判断，第二种则是用angular自带的拦截器进行处理。
先说第一种：$stateChangeStart
因为ui-router关心的是状态，因此咱们能够在每次模板引擎被解析前触发此方法

// 路由改变时判断是否登陆，未登陆则跳转至登陆页面
$rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams) {
        // 这里用event.preventDefault()能够阻止模板解析
        if (toState.name !== 'login' || fromState.name === 'login') {
             // 这里作身份验证的判断
            //  如判断cookie，session等。
           //  若判断不经过，则跳转至login页面
        }
 });

其中toState和fromState参数是获取路由的前一个状态和下一个状态，当发生路由状态改变时，若是访问的不是登录页面或者不是从登录页面跳转时，执行身份判断。
可是这种方法是有缺陷的，1.用到了$rootScope. 2.基于ui-router.3.不稳定(项目中测试发现).因为问题的存在，因此能够采用第二种拦截器的方法解决这些问题。

拦截器 Angular Interceptor
在与后台交互的过程当中，有时会但愿俘获一些请求，在其发送到服务端以前进行操做，或者在服务器完成响应执行调用前处理，拦截器就是为此应运而生的一种方法。
$httpProvider 中有一个 interceptors 数组，而所谓拦截器只是一个简单的注册到了该数组中的常规服务工厂。拦截器提供了四个方法：request ， requestError ，response 和responseError 来对请求和响应进行处理。具体介绍看这里：
要实现身份验证，能够在每次$http请求到后台以前进行验证

function requestInterceptor($cookies,) {
    var requestConfig = {
        request: function(config) {
             // 这里作身份验证的判断
            //  如判断cookie，session等。
           //  若判断不经过，则跳转至login页面
            return config;
        }
    };
        return requestConfig;
}

该方法接收请求配置对象做为参数，而后必须返回配置对象或者 promise 。若是返回无效的配置对象或者 promise 则会被拒绝，致使 $http 调用失败。而后只需将建立的拦截器注册到$httpProvider的interceptors数组中便可。

module.config(['$httpProvider', function($httpProvider) {
    $httpProvider.interceptors.push('myInterceptor');
}]);

在每次发送请求前，拦截器都会执行咱们事先写好的判断代码，去作身份的验证。比stateChangeStart好的是，它在每次请求前都进行验证，而不仅是对于路由切换时才验证。

拦截器能够作的事情还有不少，如请求恢复、loading等，搭配request ， requestError ，response 和responseError实现便可，这里不作赘述。