在vue2的项目中,我想实现一个功能,在登录的时候我会调用一个接口,这个接口会返回给我一个过期时间(例如:2024-06-11 23:14:18),现在,我希望能实现,在每次调用后端接口的时候,都加入一个判断,一旦现在的时间,超过这个接口返回给我的时间,页面直接跳转到登录页面,并弹出一个写好的dialog,请给出思路和代码示例
时间: 2024-03-29 19:35:29 浏览: 9
思路:
1. 在登录成功后,将过期时间存储到浏览器的localStorage中,用一个key来标识。
2. 在每次请求接口时,先获取localStorage中存储的过期时间,与当前时间进行比较,如果当前时间大于过期时间,则跳转到登录页面。
3. 在需要跳转到登录页面时,弹出写好的dialog。
代码示例:
1. 在登录成功后,将过期时间存储到localStorage中。
```javascript
const expireTime = '2024-06-11 23:14:18'; // 假设接口返回的过期时间
localStorage.setItem('expireTime', expireTime);
```
2. 在每次请求接口时,判断是否过期,如果过期则跳转到登录页面。
```javascript
import { MessageBox } from 'element-ui';
axios.interceptors.request.use(config => {
const expireTime = localStorage.getItem('expireTime');
if (expireTime && new Date() > new Date(expireTime)) {
MessageBox.alert('登录已过期,请重新登录', '提示', {
confirmButtonText: '确定',
callback: () => {
// 跳转到登录页面
window.location.href = '/login';
}
});
}
return config;
}, error => {
return Promise.reject(error);
});
```
3. 弹出写好的dialog的代码示例:
```javascript
import { MessageBox } from 'element-ui';
MessageBox.alert('登录已过期,请重新登录', '提示', {
confirmButtonText: '确定',
callback: () => {
// 跳转到登录页面
window.location.href = '/login';
}
});
```
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.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)
![](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)