使用vue2 ,实现在token过期后退出登录,在登陆后跳转到,退出登录之前的页面
时间: 2024-09-24 14:15:35 浏览: 9
在Vue 2中,当用户登录成功并获取到JWT(JSON Web Token)后,通常会将其存储在浏览器的localStorage或者Vuex状态管理中。为了实现在token过期后自动退出登录并回到之前的操作页面,你可以遵循以下步骤:
1. **监听Token变化**:
- 在Vuex中,创建一个getter来检查token的有效性,如`isTokenValid`。当token从服务器端更新或本地刷新时,检查新token是否有效。
```javascript
// store.js 或者相应的actions.js中
const getters = {
isTokenValid(state) {
return state.token && !!(state.token.exp && Date.now() < state.token.exp);
}
};
```
2. **设置守卫(Guard)**:
- 在Vue Router的全局守卫中(`router.beforeEach`),检测token有效性。如果无效,则清除token并重定向到登录页。
```javascript
import { mapGetters } from 'vuex';
export default {
// 守卫配置
beforeEnter (to, from, next) {
const isLoggedIn = mapGetters(['isTokenValid']);
if (!isLoggedIn) {
localStorage.removeItem('token');
router.push('/login'); // 跳转回登录页面
} else {
next();
}
},
};
```
3. **登录功能**:
- 用户点击登录按钮后,向服务器发送请求,登录成功后将新的token存储,并更新Vuex状态。
4. **导航守卫**:
- 如果你想在用户登出时自动清空token并返回原页面,可以添加一个全局的`beforeDestroy`守卫,在组件卸载前清除token。
```javascript
beforeDestroy () {
localStorage.removeItem('token');
}
```
5. **路由元信息**:
- 可以使用Vue Router的`meta`属性,为每个需要权限控制的页面标记上特定的信息,比如`previousPath`,登出后可以根据这个信息跳转回原来的页面。
```javascript
{
path: '/protected',
component: ProtectedComponent,
meta: {
previousPath: window.location.pathname || '/'
}
}
```
在登录成功后,访问`this.$route.meta.previousPath`即可回退到之前的页面。