如何在Firebase中会话到期时使用UI路由器重定向

Question

我正在使用Angular和Firebase以及UI路由器.我正在使用匿名身份验证.当会话到期时,我希望将未经身份验证的用户重定向到主页.我使用了Yeoman Angularfire Generator作为模型.但是当我使用下面的代码时,当用户已经在该页面上并且会话到期时,经过身份验证的页面不会重定向.

.config(['$urlRouterProvider', 'SECURED_ROUTES', function($urlRouterProvider, SECURED_ROUTES) {
    $urlRouterProvider.whenAuthenticated = function(path, route) {
        route.resolve = route.resolve || {};
        route.resolve.user = ['Auth', function(Auth) {
            return Auth.$requireAuth();
        }];
        $urlRouterProvider.when(path, route);
        SECURED_ROUTES[path] = true;
        return $urlRouterProvider;
    };
}])
.run(['$rootScope', '$location', 'Auth', 'SECURED_ROUTES', '$state',
    function($rootScope, $location, Auth, SECURED_ROUTES, $state) {

        Auth.$onAuth(check);

        $rootScope.$on('$stateChangeError', function(event, toState, toParams, fromState, fromParams, error) {

            if (error === 'AUTH_REQUIRED') {
                $state.go('home');
            }
            else {
                console.log('authenticated');
            }
        });

        function check(user) {

            if (!user && authRequired($location.path())) {

                $state.go('home');
            }
        }

        function authRequired(path) {
            return SECURED_ROUTES.hasOwnProperty(path);
        }
    }
])
.constant('SECURED_ROUTES', {});

路由器

.state('selection', {
    url: '/selection',
    authRequired: true,
    views: {

        'list': {

            templateUrl: 'app/views/project-list.html',
            controller: 'ProjectListCtrl as projectList',
            resolve: {    
              'user': ['Auth', function(Auth) {
                  return Auth.$waitForAuth();
               }]
             }
        },
        'selectionlist': {

            templateUrl: 'app/views/selection-list.html',
            controller: 'SelectionListCtrl as selectionList'
            resolve: {    
              'user': ['Auth', function(Auth) {
                  return Auth.$waitForAuth();
               }]
             }
        }
    }
})

Answer 1

这是单页应用程序中的常见问题.使用Angular,您可以使用$ http拦截器解决它.

这个想法是,当用户需要从后端执行某些操作以重定向到登录页面时,会话是否已过期.从响应本身检测到过期的会话.

例:

.factory('httpAuthInterceptor', function ($q) {
  return {
    'responseError': function (response) {
      // NOTE: detect error because of unauthenticated user
      if ([401, 403].indexOf(response.status) >= 0) {
        // redirecting to login page
        $state.go('home');
        return response;
      } else {
        return $q.reject(rejection);
      }
    }
  };
})

.config(function ($httpProvider) {
  $httpProvider.interceptors.push('httpAuthInterceptor');
});