如何在angular.js中使用令牌管理身份验证

Question

大家好，我创建了一个带有令牌认证的RESTful API（Rails4+Devise），我还使用gem（rack-CORS）管理CORS实现，但现在我想使用angular.js 的API

为此，我这样做：

var app = angular.module('models');
app.factory('Session',['$resource',function($resource){
    var Session = $resource(
        'http://api.creositios.dev/sessions/:id',
        {},
        {
            create: { method: 'POST'},
            delete: { method: 'DELETE', params: { id: '@id'} }
        }
    );
    return Session;
}]);  

这是我的控制器

app = angular.module('controllers');
app.controller('SessionCtrl',['$scope','Session',function($scope,Session){
  $scope.new_session =  function(){
    $scope.session = Session.create({email: '[e-mail]', password: '12345678'});
  };
}]);

到目前为止，我对实施没有任何问题。我的问题是不知道如何管理归还我工厂的代币。

使用angular.js管理用户令牌并在angular.jss中的不同控制器中验证用户的良好做法是什么？

这是我第一个使用令牌进行身份验证的应用程序。非常感谢您的建议！。

Answer 1

一种常见的做法是将安全逻辑放入服务中，并使用httpInterceptor在请求中设置令牌。

安全服务。

angular.module('security')
    .factory('Security', ['$http', function ($http) {
        var token;
        function login(email, password) {
            return $http.post('/auth/login', {email: email, password: password})
                .then(function (response) {
                    if (response.data.token) {
                        token=response.data.token;
                    }
                });
        }
        function getToken(){
            return token;
        }
        return {
            login:login,
            token:getToken
        };     
}]);

登录控制器可以使用这种特定的登录方法，例如：当用户登录时，返回的令牌将被存储。

现在，您可以使用拦截器将令牌添加到所有http请求中

    .factory('authorizationInterceptor', ['Security', function (Security) {
        return {
            request: function (config) {
                var token=Security.getToken();
                config.headers = config.headers || {};
                if (token) {
                    config.headers.Authorization = 'Bearer ' + token;
                }
                return config;
            }
        };
    }]);

当引导应用程序时，不要忘记添加拦截

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

现在，令牌将在每个http请求上设置，在失败的情况下如何处理取决于您。

例如，您可以添加另一个响应拦截器，如果得到401或403响应，它将重定向到登录页面，等等