在vue2的项目中,我想实现一个功能,在登录的时候我会调用一个接口,这个接口会返回给我一个过期时间(例如:2024-06-11 23:14:18),现在,我希望能实现,在每次调用后端接口的时候,都加入一个判断,一旦现在的时间,超过这个接口返回给我的时间,页面直接跳转到登录页面,请给出思路和代码示例
时间: 2024-03-29 19:35:25 浏览: 12
思路:
1. 在登录成功后,将过期时间存储到 Vuex 中,用一个 state 来保存。
2. 在每次请求接口时,先获取 Vuex 中保存的过期时间,与当前时间进行比较,如果当前时间大于过期时间,则跳转到登录页面。
3. 在需要跳转到登录页面时,使用 Vue Router 进行跳转,并弹出一个提示框。
代码示例:
1. 在登录成功后,将过期时间存储到 Vuex 中。
```javascript
// 在 store 中创建一个新的模块,并在其中定义 state、mutations、getters。
const auth = {
state: {
expireTime: ''
},
mutations: {
setExpireTime(state, time) {
state.expireTime = time;
}
},
getters: {
getExpireTime(state) {
return state.expireTime;
}
}
};
// 在 main.js 中导入该模块,并注册到 Vuex 中。
import Vue from 'vue';
import Vuex from 'vuex';
import auth from './store/auth';
Vue.use(Vuex);
const store = new Vuex.Store({
modules: {
auth
}
});
```
在登录成功后,将过期时间保存到 Vuex 中。
```javascript
// 在登录成功后,调用接口获取过期时间,并保存到 Vuex 中。
this.$http.post('/api/login', { username, password }).then(res => {
const expireTime = res.data.expireTime;
this.$store.commit('auth/setExpireTime', expireTime);
});
```
2. 在每次请求接口时,判断是否过期,如果过期则跳转到登录页面。
```javascript
// 在 axios 的拦截器中进行判断。
import axios from 'axios';
import router from './router';
import { Message } from 'element-ui';
axios.interceptors.request.use(config => {
const expireTime = this.$store.getters['auth/getExpireTime'];
if (expireTime && new Date() > new Date(expireTime)) {
Message.error('登录已过期,请重新登录');
router.push('/login');
}
return config;
}, error => {
return Promise.reject(error);
});
```
3. 弹出提示框的代码示例:
```javascript
// 在需要跳转到登录页面时,使用 ElementUI 的 MessageBox 弹出提示框。
import { MessageBox } from 'element-ui';
MessageBox.alert('登录已过期,请重新登录', '提示', {
confirmButtonText: '确定',
callback: () => {
// 跳转到登录页面
router.push('/login');
}
});
```