vue路由设置,登录失效后跳转到去登录页面。登录后打开的是你最后登录的页面

main.js

 

router.beforeEach((to, from, next) => {
    document.title=to.name;   //让页面title显示路由对应的name值--xlz
  if (to.path == '/login') {
    sessionStorage.removeItem('user');
  }
  let user = JSON.parse(sessionStorage.getItem('user')); 
  if (!user && to.path != '/login') {   //如果获取不到user说明登录失效了
      if( to.path == '/regist/regist' || to.path == '/mobile/exampaper'){
        next();
      }else{
        next({ 
            path: '/login',
            query: {redirect: to.fullPath} // 将跳转的路由path作为参数,登录成功后跳转到该路由-xlz
        });
      }
  } else {
    next()
  }
})

然后再login页面写

 在登录的时候把user 也就是用户的信息存起来。sessionStorage.setItem('user', JSON.stringify(data));

登陆成功跳转页面时不能写死写成首页,而是下面这个:

let redirect = decodeURIComponent(this.$route.query.redirect || '/main'); 
this.$router.push({ path: redirect })// 获取登录成功后要跳转的路由。decodeURIComponent函数编码的 URI 进行解码--xlz

  • 1
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue2中使用`vue-cookie`库可以很方便地处理Cookie。你可以使用该库来实现一个登录失效页面。下面是一个示例: 首先,安装`vue-cookie`库: ```bash npm install vue-cookie ``` 然后,在你的Vue项目中,创建一个名为`ExpiredPage.vue`的组件,用于显示登录失效页面内容。在该组件的`created`钩子函数中,你可以使用`vue-cookie`库来检查是否存在登录相关的Cookie,如果不存在则表示登录失效。 ```html <template> <div> <h1>登录失效</h1> <p>请重新登录</p> </div> </template> <script> import VueCookie from "vue-cookie"; export default { created() { const isLoggedIn = VueCookie.get("isLoggedIn"); if (!isLoggedIn) { // 登录失效,执行相关操作,例如跳转登录页面 this.redirectToLogin(); } }, methods: { redirectToLogin() { // 执行跳转登录页面的操作 // 例如使用Vue Router进行跳转 this.$router.push("/login"); } } }; </script> ``` 在上面的代码中,我们首先导入了`vue-cookie`库并将其命名为`VueCookie`。然后,在`created`钩子函数中,我们使用`VueCookie.get()`方法检查是否存在名为"isLoggedIn"的Cookie。如果不存在,则表示登录失效,我们可以执行一些操作来处理失效情况,例如跳转登录页面。 请注意,上述示例代码仅为参考,实际应用中你可能需要根据你的具体需求进行适当的修改。 最后,将`ExpiredPage.vue`组件添加到你的路由配置中,以便在登录失效时显示该页面。 希望对你有所帮助!

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值