AngularJS - 在登录时存储基本身份验证

Question

我正在用这个敲打墙 - 我对使用API​​相对较新,还没有做任何需要身份验证的事情.

我坚持向API发送POST请求.创建内容的端点是:

/entity/node

如果我发送以下内容,我可以发送成功的POST请求:

headers: {
       "Authorization": "Basic YWRtaW46MTIzcXdl", //admin:123qwe
   },

我遇到的问题是授权.我在这里指定Basic,然后是编码字符串,这是我的管理员登录.因此,当硬编码时,我可以发布.

我的问题 - 当用户正确登录时,我需要设置标题,以便将来所有的帖子请求都能正常工作.我怎样才能在AngularJS中做到这一点？

我试过传递一个动态生成的代码:

"Authorization": "Basic " + auth,

其中auth是base64编码的用户:pass,但这不起作用.我的想法是,无论何时发出POST请求,都需要将此值存储在某处以供检索.但是怎么样？

Answer 1

一旦有了令牌,请拨打此电话:

$httpProvider.defaults.transformRequest.push(function (data, headersGetter) {
    if (authToken !== null) {
        var headers = headersGetter();
        angular.extend(headers, 'Authorization: basic ' + authToken);
    }

    return data;
});

编辑:没有测试过,但它应该是这样的:

myApp.provider('authService', function() {

    var authToken = null;

    this.$get = ['$httpProvider', function($httpProvider) {
        return {
            configure: configure,
            setAuthToken: setAuthToken
        }
    };

    function configure() {
        $httpProvider.defaults.transformRequest.push(function (data, headersGetter) {
            if (authToken !== null) {
                var headers = headersGetter();
                angular.extend(headers, 'Authorization: basic ' + authToken);
            }

            return data;
        });
    }

    function setAuthToken(token) {
        authToken = token;
    }
});

然后注入authService您的应用程序配置并致电authService.configure()

Answer 2

在这种情况下,我通常一直在做的是将任何登录令牌或此类凭证(不是密码)存储在cookie中,然后通过角度服务访问它.由于角度服务是单例,因此整个应用程序都会保留该值,除非页面重新加载,这是cookie发挥作用的地方.一个可能看起来像这样的示例服务

(function(){
  function Factory($resource, $q, $window, User, $cookie){
    var Resource = $resource(
                    // your resource config
                  ),
    res = Resource,
    proto = res.prototype;

    res.currentToken = null;
    res.currentUser = null;


    res.unsetAuthProperties = function() {
      delete $cookie.authToken;
      res.currentToken = null;
      res.currentUser = null;
    };

    // call this method after you retrieve the credentials
    res.setAuthProperties = function(response) {
      if(!response.id) {  
        res.unsetAuthProperties();
      } else {
        res.currentToken = {
          id: response.id,
          value: response.value
        };
      // set the current user
      res.currentUser = User.getInstance(response.jw_tokenable);
      // set the token in the cookie
      $cookie.authToken = res.currentToken.value;
    }
  };

  res.resolveCurrentUser = function () {
    var defered = $q.defer();
    // if the user is already signed in 
    // resolve the promise
    // if not do a manual resolve
    res.isSignedIn() ? defered.resolve() : resolve();
    // get the current user from the server
    // and resolve the promise
    function resolve () {
      res.current().$promise
      .then(function(response) { 
        res.setAuthProperties(response); 
      })
      .finally(function() { 
        res.isSignedIn() ? defered.resolve() : defered.reject(); 
      });
    };

    return defered.promise;
  };

  return res;

};

准备好这样的服务后,使用角度拦截器拦截要添加auth标头的请求. https://docs.angularjs.org/api/ng/service/$http

Answer 3

使用angular-local-storage你的令牌存储在客户端的本地浏览器时,用户获得成功登录.

角和本地存储

$http.post('/token', data).success(function (response) {
    localStorageService.set('authorizationData', { token: response.access_token,});
});

一旦在本地存储中设置令牌,您就可以为该用户获取令牌.

像这样 : localStorageService.get('authorizationData');

现在用于authInterceptorService为每个请求设置标头

var _request = function (config) {
        config.headers = config.headers || {};
        var authData = localStorageService.get('authorizationData');
        if (authData) {
            config.headers.Authorization = 'Basic' + authData.token;
        }
        return config;
    }

在这里,您将获得所有详细信息:使用ASP.NET Web API 2,Owin和Identity进行AngularJS令牌身份验证