AngularJS - 重定向到登录页面和会话ID的持久性

时间:2012-11-20 17:20:32

标签: angularjs

我正在寻找一种方法来做这两件事,首先我想将用户重定向到登录页面,如果没有找到SessionID,其次我想听听你对仅在内存中保存会话ID的看法(没有cookies) )。

我想出的重定向解决方案是:

1 - 创建一个名为OAuth的服务,检查是否存在SessionID,如果不存在,则重定向到登录页面,该服务还负责登录和注销方法。

app.factory('OAuth', ['$http', function ($http) {

    var _SessionID = '';

    return { 
        login: function () {
            //Do login ans store sessionID in var _SessionID
        },

        logout: function () {
            //Do logout
        },

        isLoggedIn: function () {
            if(_SessionID) {
                return true;
            }
            //redirect to login page if false
        }
    };

}]);

2 - 在每个控制器中注入新的OAuth服务,并检查用户是否为LoggedIn

app.controller('myCtrl', ['$scope', 'OAuth', function ($scope, OAuth) {

    //check if user is logged
    OAuth.isLoggedIn();

}]);

问题:

1 - 将在所有控制器中调用isLoggedIn()方法,因此我想知道是否有办法在不必注入服务的情况下执行此操作并在每个控制器中调用它。

2 - 我没有使用cookie存储sessionID,而是将其保存在OAuth的_SessionID变量中,并且每个请求都将其发送到服务器。这是一种可行/安全的方法吗?你能给我一些想法吗?

谢谢!

4 个答案:

答案 0 :(得分:9)

我使用类似的策略(拦截来自服务器的401响应)。您可以在此处查看完整示例:https://github.com/Khelldar/Angular-Express-Train-Seed

它在会话存储的后端使用node和mobgodb,在客户端使用一个精简的http拦截器,不会像上面链接的Dan那样重试请求:

 var interceptor = ['$q', '$location', '$rootScope', function ($q, $location, $rootScope) {
        function success(response) {
            return response;
        }

        function error(response) {
            var status = response.status;
            if (status == 401) {
                $location.path('/login');
            }
            return $q.reject(response);
        }

        return function (promise) {
            return promise.then(success, error);
        }
    }];
    $httpProvider.responseInterceptors.push(interceptor);

答案 1 :(得分:8)

我会开始here,Witold已经创建了这个基于http响应的酷拦截器。我用它,它真的很有帮助。

答案 2 :(得分:2)

在我的情况下,我使用了

  1. 拦截器与$ httpProvider
  2. 配置
  3. 和$ window依赖关系,因为$ location只是将路径附加到现有网址。发生的事情就像“http://www.tnote.me/#/api/auth”一样,它应该像“http://www.tnote.me/auth”一样“
  4. 代码段就是这样。

    noteApp = angular.module('noteApp', ['ngRoute', 'ngCookies'])
      .factory('authInterceptor', ['$rootScope', '$q', '$cookies', '$window', 
        function($rootScope, $q, $cookies, $window) {
          return {
            request: function (req) {
              req.headers = req.headers || {};
              if ($cookies.token) {
                req.headers.Authorization = 'Bearer ' + $cookies.token;  
              }
    
              return req;
            },
            responseError: function (rejection) {
              if (rejection.status == 401) {
                $window.location = '/auth';      
              }
    
              return $q.reject(rejection);
            }
          }
      }])
      .config(['$routeProvider', '$httpProvider', function($httpProvider) {
        $httpProvider.interceptors.push('authInterceptor');  
        }
      ])
    

答案 3 :(得分:0)

  

这会奏效。它在我的应用程序中工作正常

var interceptor = function ($q, $location) {
        return {
            request: function (config) {//req
                console.log(config);
                return config;
            },

            response: function (result) {//res
                console.log('Repos:');
                console.log(result.status);
                return result;
            },

            responseError: function (rejection) {//error
                console.log('Failed with', rejection.status, 'status');
                if (rejection.status == 403) {
                    $location.url('/dashboard');
                }

                return $q.reject(rejection);
            }
        }
    };
    module.config(function ($httpProvider) {
        $httpProvider.interceptors.push(interceptor);
    });