当前位置: 首页 > 编程笔记 >

Vue登录拦截 登录后继续跳转指定页面的操作

查宜修
2023-03-14
本文向大家介绍Vue登录拦截 登录后继续跳转指定页面的操作,包括了Vue登录拦截 登录后继续跳转指定页面的操作的使用技巧和注意事项,需要的朋友参考一下

在开发中我们经常遇到这样的需求,需要用户登录后才可以访问该页面,如果用户没有登录点击该页面时则自动跳转到登录页面,登录后又跳转到链接的页面而不是首页,这种问题该如何去做呢?

1、在路由器router下的 index.js 的配置中,给需要拦截登录的页面的路由上加一个meta: {loginRequest: true} ,其中loginRequest 变量自己可以随意定义

2、在main.js文件里面添加beforeEach钩子函数

解释:

router.beforeEach((to, from, next) => { } 三个参数:

to:即将要进入的目标 路由对象

from:当前导航正要离开的路由

next:(function函数) 调用next() 进行管道中的下一个钩子

next() 无参 进行 下一个钩子函数

next({ path:'/xxx' , query:{}}) 携带参数跳到xxx页面

3、登录页面login.vue,登录完成后,跳到指定页面或首页

补充知识:vue实现登录后跳转到来源路由url

sessionStorage存储from.path来源的路由url,如果不是登录或者注册就拦截跳到登录页,如果是就放行

router.beforeEach(function(to,from,next){
 
  if(to.path!='/login' && to.path!='/register'){
    sessionStorage.setItem('referrer',from.path) //储存来源路由
    alert('请登录')
    next({
      path:'/login'
    })
  }else{
    next()
  }
 
})

登录后判断sessionStorage中是否有存储来源路由,如果有就跳转到这个路由

//获取来源页路由
var referrer = sessionStorage.getItem('referrer');
if(referrer != null){
  this.$router.push(referrer)
}else {
  this.$router.push('/home')
}
 

以上这篇Vue登录拦截 登录后继续跳转指定页面的操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持小牛知识库。

 类似资料:
  • 本文向大家介绍vue实现登录后页面跳转到之前页面,包括了vue实现登录后页面跳转到之前页面的使用技巧和注意事项,需要的朋友参考一下 在开发中我们经常遇到这样的需求,需要用户直接点击一个链接进入到一个页面,用户点击后链接后会触发401拦截返回登录界面,登录后又跳转到链接的页面而不是首页,这种问题该如何去做呢? 先说一下我们需要用到的几个API: 1.router.currentRoute:当前的路由

  • 记录器文件中的日志- org.springframework.Security.Access.event.loggerlistener-安全授权失败,原因是:org.springframework.Security.Access.accessdeniedexception:访问被拒绝;通过身份验证的主体:org.springframework.security.authentication.ano

  • 本文向大家介绍vue利用全局导航守卫作登录后跳转到未登录前指定页面的实例代码,包括了vue利用全局导航守卫作登录后跳转到未登录前指定页面的实例代码的使用技巧和注意事项,需要的朋友参考一下 有这样一个场景:如果你在登录之前输入了http://localhost:8080/oauth2-mgm-app/#/userManage,想进入userManage页面,但是由于没有登录,系统是不会让你进入这个页

  • 本文向大家介绍vue登录页面cookie的使用及页面跳转代码,包括了vue登录页面cookie的使用及页面跳转代码的使用技巧和注意事项,需要的朋友参考一下 1、大概流程  a、登录:前端使用validate对输入信息进行验证 验证成功则成功跳转到用户信息页并存储cookie值  b、首页跳转用户信息页:判断cookie值cookie存在并不为空则跳转用户信息页,若为空则跳转登录页  c、退出页:点

  • 我正在研究SSO的一些新用法。基本上,我正在尝试找到如何拦截SAML请求的方法,该请求通过某种IdP代理或第三方服务从服务提供商发送到身份提供商,该服务将保存SAML请求并为用户提供一些附加功能。所需的过程可能如下所示: 用户从SP调用SAML请求-例如单击登录按钮 用户被重定向到第3方服务,例如,小型调查(这是理论示例) 提交调查后,用户被重定向到IdP并应继续登录 我对SimpleSAMLph

  • 问题内容: 我们的应用程序要求用户登录才能查看任何内容。如果没有有效的用户会话,则会拦截对所有页面的访问,并弹出登录表单。我希望拦截器在显示登录表单之前记住原始请求URI,并在登录表单验证成功后重定向到该请求。我尝试按照Struts2Redirect进行身份验证拦截器后的更正操作 但是,由于,我得到了空白页。 从未被调用。 解决方案: 完全擦除@Results批注,而不是调用 问题答案: 如果未登