Javascript Vue.js拦截器
如何在Javascript Vue.js拦截器,javascript,laravel-5.2,vue.js,laravel-elixir,Javascript,Laravel 5.2,Vue.js,Laravel Elixir,如何在vue.js中使用拦截器?因此,在每次请求/响应之前,它应该首先进入拦截器。我已经搜索了很多,但是找不到关于这个的好文档 我希望像这样使用JWTAuth: (function (define) { 'use strict' define(function (require) { var interceptor interceptor = require('rest/interceptor') /** * Authenticates the
vue.js
中使用拦截器
?因此,在每次请求/响应之前,它应该首先进入拦截器。我已经搜索了很多,但是找不到关于这个的好文档
我希望像这样使用JWTAuth:
(function (define) {
'use strict'
define(function (require) {
var interceptor
interceptor = require('rest/interceptor')
/**
* Authenticates the request using JWT Authentication
*
* @param {Client} [client] client to wrap
* @param {Object} config
*
* @returns {Client}
*/
return interceptor({
request: function (request, config) {
var token, headers
token = localStorage.getItem('jwt-token')
headers = request.headers || (request.headers = {})
if (token !== null && token !== 'undefined') {
headers.Authorization = token
}
return request
},
response: function (response) {
if (response.status && response.status.code === 401) {
localStorage.removeItem('jwt-token')
}
if (response.headers && response.headers.Authorization) {
localStorage.setItem('jwt-token', response.headers.Authorization)
}
if (response.entity && response.entity.token && response.entity.token.length > 10) {
localStorage.setItem('jwt-token', 'Bearer ' + response.entity.token)
}
return response
}
})
})
}(
typeof define === 'function' && define.amd ? define : function (factory) { module.exports = factory(require) }
// Boilerplate for AMD and Node
))
Vue.http.interceptors.push((request, next) => {
request.headers['Authorization'] = auth.getAuthHeader()
next((response) => {
if(response.status == 401 ) {
auth.logout();
router.go('/login?unauthorized=1');
}
});
});
但我不知道如何在每次请求/响应之前拦截。(我使用Laravel 5.2) Vue本身没有AJAX功能。您是在谈论plugin vue资源,还是使用其他库进行请求
vue资源支持具有Intereceptor:(向下滚动到最后一节)全局配置示例:
Vue.http.interceptors.push({
request: function (request){
request.headers['Authorization'] = auth.getAuthHeader()
return request
},
response: function (response) {
//console.log('status: ' + response.data)
return response;
}
});
请求
用于传出流量,而响应
如果用于传入消息
也可以在vue组件中进行本地配置
编辑-由于sytax现在已经更改,它应该如下所示:
(function (define) {
'use strict'
define(function (require) {
var interceptor
interceptor = require('rest/interceptor')
/**
* Authenticates the request using JWT Authentication
*
* @param {Client} [client] client to wrap
* @param {Object} config
*
* @returns {Client}
*/
return interceptor({
request: function (request, config) {
var token, headers
token = localStorage.getItem('jwt-token')
headers = request.headers || (request.headers = {})
if (token !== null && token !== 'undefined') {
headers.Authorization = token
}
return request
},
response: function (response) {
if (response.status && response.status.code === 401) {
localStorage.removeItem('jwt-token')
}
if (response.headers && response.headers.Authorization) {
localStorage.setItem('jwt-token', response.headers.Authorization)
}
if (response.entity && response.entity.token && response.entity.token.length > 10) {
localStorage.setItem('jwt-token', 'Bearer ' + response.entity.token)
}
return response
}
})
})
}(
typeof define === 'function' && define.amd ? define : function (factory) { module.exports = factory(require) }
// Boilerplate for AMD and Node
))
Vue.http.interceptors.push((request, next) => {
request.headers['Authorization'] = auth.getAuthHeader()
next((response) => {
if(response.status == 401 ) {
auth.logout();
router.go('/login?unauthorized=1');
}
});
});
您是否考虑过使用vue资源?您可以使用指向节()的链接,而不是滚动。值得注意的是,这个答案有点过时,语法现在略有不同。正如Linus在回答中指出的,检查文档:如果我将
vue.http.intercepters
添加到多个文件中会怎么样??然后代码在http调用之前进入每个文件?