vue 前端使用beforeRouteEnter也能实现登陆拦截,超简单

beforeRouteEnter(to, from, next):进入路由之前执行的函数,写在main.vue里实现登陆拦截。

1、首先在登录接口请求成功后,将后台返回的用户名存到sessionStorage里
2、在main.vue里使用钩子函数beforeRouteEnter(to, from, next)

beforeRouteEnter(to, from, next) {    
      if(sessionStorage.getItem("username")) {     //如果sessionstorage里存了用户名,则表示已登录
        next(true);
      }else {
        next(vm => {    // 通过 `vm` 访问组件实例 ,直接用this是有指向问题的   
          vm.$router.push('/');
          vm.$message({       //这里是elementUI的message提示,按自己需求来写就行
            message: '请先登录!',
            type: 'warning'
          });
        })

      }
    },
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue前端和Java后端实现登录拦截使用session,以下是详细的步骤: 1. 前端实现: 在Vue前端应用中,需要创建一个拦截器来拦截所有的请求,在请求头中添加token信息。在登录成功后,将后端返回的token存储在浏览器的本地存储(localStorage)中,每次发送请求时从本地存储中获取token并添加到请求头中,用于后端进行认证。 2. 后端实现: 在Java后端中,需要创建一个拦截器来验证请求头中的token信息,以确保用户登录有效。在用户登录验证成功后,生成一个session对象,并将其存储在服务器端(如Redis、数据库等)。 当用户发送请求时,后端拦截器首先从请求头中获取token信息,然后根据token从存储的session中查找对应的用户信息。如果找到用户信息,说明用户已登录,请求继续进行;如果未找到用户信息,说明用户未登录或登录已过期,需要返回相应的错误信息给前端。 3. 登录过程: 前端向后端发送登录请求,后端验证用户的用户名和密码是否正确,如果正确则生成一个唯一的token,并将其返回给前端前端收到token后将其存储在本地存储中。后续的请求均需要在请求头中携带该token。 4. 登出过程: 当用户点击退出登录按钮时,前端移除本地存储中的token,并向后端发送一个请求来销毁后端存储的session对象。 综上所述,通过前端拦截器和后端拦截器的配合,在前端发送请求时添加token信息,并在后端验证token信息来实现登录拦截。通过session机制,后端可以在多次请求之间保存用户的登录状态,确保用户的合法性和安全性。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值