添token的值,退出后清空

登录后在sessionStorage中添加token的值,退出后清空

localStorage 和 sessionStorage 属性允许在浏览器中存储 key/value 对的数据。

sessionStorage 用于临时保存同一窗口(或标签页)的数据,在关闭窗口或标签页之后将会删除这些数据。


语法

window.sessionStorage

保存数据语法:

sessionStorage.setItem("key", "value");

读取数据语法:

var lastname = sessionStorage.getItem("key");

删除指定键的数据语法:

sessionStorage.removeItem("key");

删除所有数据:

sessionStorage.clear();
在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`即可回退到之前的页面。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值