token过期后记录当前页面路由,重新登陆跳转至原页面

当检测到401状态码时,响应拦截器会捕获token过期情况。它保存当前页面路由并在登录页面后附带此路径。用户重新登录后,通过查询参数获取路径并跳转回之前页面。如果路径包含特殊字符,使用encodeURIComponent编码和decodeURIComponent解码处理。
摘要由CSDN通过智能技术生成

实现当token过期,重新登录后返回原页面

思路:在响应拦截器中获取到token过期的状态码401,使用router.currentRoute.fullPath方法获取到当前页面的路由地址,以路径参数的形式放到登录页面地址的后面。重新登陆后,使用this.$route.query方法获取路径地址参数并跳转至该路由页面。

代码:

//响应拦截其中

//导入router
	import router from '../router'


    if (code === 401) {
      if (!isRelogin.show) {
        isRelogin.show = true
        MessageBox.confirm('登录状态已过期,您可以继续留在该页面,或者重新登录', '系统提示', {
          confirmButtonText: '重新登录',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            isRelogin.show = false
            store.dispatch('LogOut').then(() => {
              // router.currentRoute.fullPath,获取跳转前的地址,放到登录页面地址的后面
              // 防止地址含有特殊字符,使用encodeURIComponent()方法将其转义
              router.push({ path: `/login?path=${encodeURIComponent(router.currentRoute.fullPath)}` })
            })
          })
          .catch(() => {
            isRelogin.show = false
          })
      }
      return Promise.reject('无效的会话,或者会话已过期,请重新登录。')
    }
//登录函数
handleLogin() {
		this.$store.dispatch("Login", this.loginForm)
            .then(() => {
              // 使用decodeURIComponent()进行解码
              this.$router
                .push({
                  decodeURIComponent(this.$route.query.path) !== "undefined" ? decodeURIComponent(this.$route.query.path) : "/",
                })
                .catch(() => {});
         })
	}

注意:当原页面路径地址含有多个路径参数时(含有&等特殊符号),需要使用encodeURIComponent()方法将其转义。在登录时使用decodeURIComponent()函数进行解码。

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、付费专栏及课程。

余额充值