在angular js中,如何存储变量以供其他HTTP函数使用
in angular js, how to store variable for use in other http functions
我有以下控制器:
angular.
module('phoneList').
component('phoneList', {
templateUrl: '/phone-list.template.html',
controller: ['$http',
function PhoneListController($http) {
var self = this;
var access_token = '';
var data = $.param({
grant_type: 'password',
username: 'test',
password: 'test',
client_id:'1234',
client_secret:'12345',
});
var config = {
headers : {
'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8;'
}
}
$http.post('/o/token/', data, config)
.success(function (data, status, headers, config) {
self.access_token = data['access_token'];
console.log(access_token);
})
.error(function (data, status, header, config) {
$scope.ResponseDetails = "Data: " + data +
"<hr />status: " + status +
"<hr />headers: " + header +
"<hr />config: " + config;
});
var header = {
headers : {
'Authorization': 'Bearer '+self.access_token
}
}
$http({method: 'GET', url: 'api/posts/', headers: {'Authorization': 'Bearer '+self.access_token}}).then(function(response) {
self.phones = response.data;
});
}
]
});
我想使用从该函数返回的持续数天的访问令牌。我不想每次都获得一个新的令牌,但要确定令牌是否过期或是否需要检索另一个令牌:
$http.post('/o/token/', data, config)
.success(function (data, status, headers, config) {
self.access_token = data['access_token'];
console.log(access_token);
})
在我的get函数中:
$http({method: 'GET', url: 'api/posts/', headers: {'Authorization': 'Bearer '+self.access_token}}).then(function(response) {
self.phones = response.data;
});
我如何完成这个?
假设你的应用程序的名称是myapp
。然后,创建一个名为authentication
的模块,您可以在其中放置一个工厂,该工厂将检索令牌并将其放入会话存储中。在同一个工厂中,您可以添加一个getToken
服务,它将返回会话存储数据:
angular.module('authentication').factory('authenticationService', function($http, $se){
function authenticate(){
$http.post('/o/token/', data, config)
.success(function (data, status, headers, config) {
$sessionStorage.access_token = data['access_token'];
});
}
function getToken(){
return $sessionStorage.access_token;
}
return {
authenticate:authenticate,
getToken:getToken
};
});
在你的主模块中,调用run函数并调用你的服务:
angular.module('myapp').run(function(authenticationService){
authenticationService.authenticate().then(function(){
// Redirection to the next route
});
});
在您的控制器中,只需注入authenticationService
工厂并使用authenticationService.getToken()
检索令牌,而不是进行Ajax调用:
$http({method: 'GET', url: 'api/posts/', headers: {'Authorization': 'Bearer '+ authenticationService.getToken()}}).then(function(response) {
self.phones = response.data;
});
相关文章:
- 使用同一对象中的其他变量声明变量
- 创建要在其他函数中使用的全局变量
- 如何在不保存到其他变量的情况下更改JavaScript中的值
- 如何将变量数据存储在其他变量中并对其进行解析
- Javascript创建函数,以便在其他函数之间共享变量
- AngularJS:如何与其他控制器共享作用域函数和变量
- JavaScript 和其他使用松散定义的变量的语言
- 访问jeditable内部的其他变量
- 是否可以在其他文件中获取 AJAX 成功变量的值
- 如何在 javascript 中将变量传递给对象内的其他函数
- 如何在EmberJS模板中访问存储在其他变量中的键中的对象属性的值
- 如何检查一个变量是否大于多个其他变量
- ng绑定html,变量名来自ng repeat,但在其他地方定义了变量
- 返回带有其他函数的变量
- 通过用户输入更改变量的值,然后在其他页面上重新使用
- 如何将全局变量放在Globals.js模块中,并在其他模块中访问它们
- 从其他文件访问 Ext 甘特 JS 变量
- JavaScript变量如何从数据库或XML(或其他)文件中读取值?可能吗
- JavaScript 变量在没有指令的情况下写入其他变量
- 使用 ajax 将多个变量传递给其他页面