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

Posted 2023-03-08

【中文标题】如何在 angular.js 中使用令牌管理身份验证？

【英文标题】：How to manage authentication with token in angular.js?

【发布时间】：2015-01-01 02:35:48

【问题描述】：

大家好，我创建了一个带有令牌身份验证的 RESTful API（Rails 4 + Devise），我还使用 gem（rack-cors）管理 CORS 实现，但现在我想将 API 与 angular.js 一起使用

为此，我这样做：

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.js 的不同控制器中验证用户的良好做法是什么？

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

【参考方案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 响应重定向到登录页面等