我正在使用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 的所有请求设置标题。那么我应该创建哪些功能来存储令牌?
答案 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');
});