vue2 如何统一处理接口响应的登录失效的数据 登录失效就跳转到登录页面
时间: 2024-04-16 18:28:29 浏览: 19
在Vue 2中,可以使用axios拦截器来统一处理接口响应的登录失效的数据,并实现跳转到登录页面的功能。
首先,需要安装axios,可以通过以下命令进行安装:
```
npm install axios --save
```
接下来,在你的项目中创建一个`api`文件夹,并在其中新建一个`http.js`文件。在该文件中,引入axios并进行一些配置,如下所示:
```javascript
// api/http.js
import axios from 'axios';
// 创建axios实例
const http = axios.create({
baseURL: 'http://your-api-base-url.com', // 设置接口请求的基础URL
timeout: 5000 // 设置超时时间
});
// 请求拦截器
http.interceptors.request.use(
config => {
// 在发送请求之前可以进行一些处理,例如添加请求头等
// config.headers['Authorization'] = 'Bearer ' + token;
return config;
},
error => {
return Promise.reject(error);
}
);
// 响应拦截器
http.interceptors.response.use(
response => {
// 在接收到响应数据之后可以进行一些处理,例如判断登录失效等
return response.data;
},
error => {
// 处理响应错误
if (error.response && error.response.status === 401) {
// 登录失效,跳转到登录页面
window.location.href = '/login';
}
return Promise.reject(error);
}
);
export default http;
```
在这个文件中,我们创建了一个axios实例,并在其中定义了请求拦截器和响应拦截器。在请求拦截器中,你可以进行一些请求相关的处理,例如添加请求头等;在响应拦截器中,我们判断了响应状态码是否为401,如果是,则表示登录失效,将会跳转到登录页面。
接下来,在需要发起接口请求的地方,将使用到这个axios实例。例如,在一个`userService.js`文件中,我们定义了一个登录接口的方法:
```javascript
// api/userService.js
import http from '@/api/http';
export function login(username, password) {
return http.post('/login', { username, password });
}
```
在上述代码中,我们通过`http`实例来发起请求。当登录接口返回401状态码时,拦截器会自动跳转到登录页面。
请注意,以上代码只是一个示例,你需要根据你的实际情况进行相应的修改和调整。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)