如何从响应角js获取令牌时在所有头中设置护照令牌

时间:2017-02-02 06:48:40

标签: angularjs

我正在使用Angular js和Larvel 5.4。

我已经在角度js中创建了用于身份验证的Login控制器,其代码如下所示:

app.controller('LoginController',function($scope,$state) {
$scope.vm.login = function() {

    $http({
            method: 'POST',
            url: apiUrl+'auth/token',
            data: $.param($scope.vm.logDetails),
            headers: {'Content-Type': 'application/x-www-form-urlencoded'}
        }).then(function(response) {
            console.log(response.data.access_token);
            if(response.data.access_token) {                    
                $state.go('dashboard.masters_userroles');
            }
            else {
                alert("Your credentials is wrong");
            }
        });
}
});

我为它创建了拦截器。但它无法设置标题。

.factory('tokenInjector',function($window){
return {
    //For each request the interceptor will set the bearer token header.
    request: function($config) {            
        if($window.sessionStorage.getItem('userInfo-token'))
        {
            var token=$window.sessionStorage.getItem('userInfo-token');
            console.log(token);
            //set authorization header
            $config.headers['Authorization'] = 'Bearer '+token;
            return $config;
        }
    }
}
})
.config(function ($httpProvider) {
    $httpProvider.interceptors.push('tokenInjector');
})

它会出现Error: $compile:tpload Error Loading Template这样的错误。

这里在控制台中我收到了控制器中的令牌。现在我想为 $ stateProvider 的所有请求设置标题。那么我应该创建哪些功能来存储令牌?

1 个答案:

答案 0 :(得分:0)

要完成您描述的功能,您必须做两件事。

1)存储您刚收到的令牌(LocalStorage,SessionStorage,CookieStorage)。任何你想要的人。

e.g。

sessionStorage.setItem(token, angular.toJson(response.data.access_token));

2)对于您提出的每个请求,您必须在标题中提供存储的令牌。为此,您可以使用$http Interceptors。您可以为此创建工厂。

e.g。

angular.module('app').factory('tokenInjector',function(){
  return {
    config.headers['Bearer'] = sessionStorage.getItem(angular.fromJson(token));
    return config;
  }
})

然后在您的.config中,您必须在应用中明确表示您希望通过$httpProvider服务使用令牌注入器。

e.g。

angular.module('app').config(function ($httpProvider) {
  $httpProvider.interceptors.push('tokenInjector');
});