设置Cookie进行统一拦截,使全局都携带Cookie,便于系统中权限的控制展示。
在系统的main.js文件中设置:
其中this.setRequestHeader的Authorization为cookie中存储的token。
在cookie中存储token的具体方法详见:vue在Cookie和对localStorage的封装中存储登录用户的token、用户名等信息_刚刚好ā的博客-CSDN博客
/*全局设置ajax请求拦截*/
hookAJAX()
function hookAJAX () {
XMLHttpRequest.prototype.nativeOpen = XMLHttpRequest.prototype.open;
var customizeOpen = function (method, url, async, user, password) {
// do something
console.log(method, url, async, user, password);
let cookie = localStorage.getItem('userToken')
this.nativeOpen(method, url, async, user, password);
this.setRequestHeader("Authorization", cookie);
}
};
XMLHttpRequest.prototype.open = customizeOpen;
}
由于系统中有些内容需做权限展示,即获取token,而在这里是先统一全局加入token,故会出现Refused to set unsafe header "Cookie"这一错误,且总是跳转至登录页面。解决办法为过滤到需要做权限的token的url,代码如下:
/*全局设置ajax请求拦截*/
hookAJAX()
function hookAJAX () {
XMLHttpRequest.prototype.nativeOpen = XMLHttpRequest.prototype.open;
var customizeOpen = function (method, url, async, user, password) {
// do something
if (url.indexOf('dologin') !== -1 || url.indexOf('localhost') !== -1 || url.indexOf('videoApplication') !== -1 || url.indexOf('smartcity') !== -1) {
this.nativeOpen(method, url, async, user, password);
} else {
console.log(method, url, async, user, password);
let cookie = localStorage.getItem('userToken')
this.nativeOpen(method, url, async, user, password);
this.setRequestHeader("Authorization", cookie);
}
};
XMLHttpRequest.prototype.open = customizeOpen;
}