Vue拦截器实现统一Token，并兼容IE9验证功能
Vue.js是一个流行的前端框架，由于其灵活性和可扩展性，越来越多的开发者选择使用Vue.js来构建Web应用程序。在实际开发中，我们经常需要处理身份验证问题，以确保用户的身份和权限。 token是身份验证的常用方法，这篇文章将重点介绍如何使用Vue拦截器实现统一Token，并兼容IE9验证功能。
什么是Token
在身份验证中，Token是一种常用的方法，用于验证用户的身份。Token是服务器生成的随机字符串，包含了用户的身份信息。当用户登录成功后，服务器会颁发一个Token，客户端将其存储在localStorage中。在后续的每次请求中，客户端都会将Token添加到请求头中，以便服务器验证用户的身份。
Vue拦截器
Vue拦截器是Vue.js提供的一种机制，允许开发者在请求或响应过程中执行某些操作。拦截器可以分为两种：请求拦截器和响应拦截器。请求拦截器可以在请求发送前执行某些操作，而响应拦截器可以在响应接收后执行某些操作。
实现统一Token
为了实现统一Token，我们可以使用Vue拦截器。在axios中，我们可以使用interceptors.request.use()方法来添加一个请求拦截器。在这个拦截器中，我们可以从localStorage中获取Token，并将其添加到请求头中。
```javascript
axios.interceptors.request.use(function (config) {
let token = window.localStorage.getItem("tokenid");
if (token) {
config.headers.Authorization = token;
// ...
}
return config;
});
```
兼容IE9
然而，在IE9中，我们需要特殊处理，因为IE9不支持某些JavaScript特性。在我们的拦截器中，我们可以判断浏览器类型和版本，并执行相应的操作。
```javascript
if (browser == "Microsoft Internet Explorer" && trim_Version == "MSIE9.0") {
if (config.url.indexOf('?') > 0) {
config.url = config.url + "&token=" + JSON.parse(token).value;
} else {
config.url = config.url + "?token=" + JSON.parse(token).value;
}
}
```
响应拦截器
在响应拦截器中，我们可以处理响应结果。如果响应状态码是401，我们可以清除Token并跳转到登录页面。
```javascript
axios.interceptors.response.use(
response => {
return response;
},
error => {
if (error.response) {
switch (error.response.status) {
case 401:
localStorage.clear();
// ...
}
}
}
);
```
结论
通过使用Vue拦截器，我们可以实现统一Token，并兼容IE9验证功能。这种方法可以简化身份验证过程，并提高应用程序的安全性。
