vue利用全局导航守卫作登录后跳转到未登录前指定页面的实例代码

2025-10-25 22:37:26

有这样一个场景：如果你在登录之前输入了http://localhost:8080/oauth2-mgm-app/#/userManage，想进入userManage页面，但是由于没有登录，系统是不会让你进入这个页面，之后会被定向到login页面。但是在登录之后，认为你有这个权限了，就需要重新定向到userManage页面。大致流程图如图1所示：

图1 登录后跳转到未登录前指定页面流程图

　　在vue-route的官方文档里其实有给到过这个demo，官方文档链接在此：https://router.vuejs.org/zh/guide/advanced/meta.html。但是不是很符合我们的需求，于是稍加改动，先上代码，搭配流程图可能更容易理解：

router.beforeEach((to, from, next) => {
 var asideMenuConfig = sessionStorage.getItem("asideMenuConfig");
 // 验证当前路由所有的匹配中是否需要有登录验证的
 if (to.matched.some(record => record.meta.requiresAuth)) {
  // 这里可以将cookie里是否存有token作为验证是否登录的条件
  // 请根据自身业务需要修改
  // 本段代码根据是否有权限菜单作为是否登录依据
  if (asideMenuConfig) {
   //校验所跳路由是否在配置菜单中
   if (asideMenuConfig.indexOf(to.path) != -1 || to.path == "/index" || to.path == "/login") {
    if(sessionStorage.getItem('redirect')!=null){
     var redirect=sessionStorage.getItem('redirect');
     if(to.path == redirect){//解决next()无限循环
      next()
     }else{
      next({
       path: redirect
      });
     }
    }else{
     next();
    }
   } else {
    next({
     path: from.path
    })
   }
  } else {
   sessionStorage.setItem('redirect', to.fullPath);
   next({
    name: 'login'
   })
  }
 } else {
  next();
 }
})

　　系统以是否有权限菜单作为是否登录依据，此处的权限菜单（不同人有不同的权限，所显示的菜单也不一样）由后端送出，处理成自己想要的树结构（例如样例代码中的asideMenuConfig，如图2所示）之后保存下来，此为前提。还有一种就是利用token验证作为登录依据，根据自己的业务需要吧，此处不展开。

图2asideMenuConfig

　　首先要在route.js定义路由（代码为节选）:在路由元信息(meta字段)中添加一个对象，里面包含：requiresAuth（是否需要权限），title（子菜单名），parent（所属菜单名）

{
   path: '/RoleManage',
   name: 'RoleManage',
   component: () => import("@/pages/UserManage/roleManage"),
   meta: {
     requiresAuth: true,
     title: '角色管理',
     parent:"用户管理"
   }
},

　　然后我们需要遍历$rout.matched来检查路由记录中的meta字段，这些在官方文档中已经写的很清楚了，这里就不细细张开了。这里重点看下some() 方法，some()测试数组中的某些元素是否通过了指定函数的测试。

to.matched.some(record =>record.meta.requiresAuth)表示的是只要有一个页面的meta里的requiresAuth为true，即需要权限，则to.matched.some()返回true。　　

最后还有一处代码需要注意的是：

有人是不是就想了，获取了登陆前保存的页面路径就可以直接跳转到目标页面了，即写成下列这种形式，但是此举会导致页面一直无限循环调用导航守卫。

if(sessionStorage.getItem('redirect')!=null){
  var redirect=sessionStorage.getItem('redirect');
  next({
    path: redirect
  });
}else{
  next();
}

原因是一定要调用next()来resolve这个导航守卫钩子，但是next()有参数和无参数是不一样的，执行效果依赖next()的调用参数。

　　next(): 进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是confirmed(确认的)。

　　next()或者next({path:'/'})跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。你可以向next传递任意位置对象，且允许设置诸如repace:true、name:'home'之类的选项以及任何用在route-link的to prop或router.push中的选项。

注意：确保要调用next()，否则钩子就不会被 resolved。

总结

到此这篇关于vue利用全局导航守卫作登录后跳转到未登录前指定页面的文章就介绍到这了,更多相关vue利用全局导航守卫作登录后跳转到未登录前指定页面内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

Vue-router路由判断页面未登录跳转到登录页面的实例

如下所示: router.beforeEach((to, from, next) => { if (to.matched.some(record => record.meta.requireAuth)){ // 判断该路由是否需要登录权限 if (token) { // 判断当前的token是否存在 next(); } else { next({ path: '/login', query: {redirect: to.fullPath} // 将跳转的路由path作为参数,登录成功后跳转到该
vue实现未登录跳转到登录页面的方法

环境:vue 2.9.3; webpack;vue-router 目的:实现未登录跳转例子:直接在url地址栏输入...../home,但是这个页面要求需要登陆之后才能进入,判断的值就通过登陆之后给本地缓存存入的token判断,如果没有就跳转到登录页面,有的话就打开. 图示: 1.直接在url地址栏输入http://127.0.0.1:9000/#/home,但是页面会直接跳转到登录页,而且会带上参数. --------------------------------------------分
使用vue-route 的 beforeEach 实现导航守卫(路由跳转前验证登录)功能

路由跳转前做一些验证,比如登录验证(未登录去登录页),是网站中的普遍需求.对此,vue-route 提供的 beforeRouteUpdate 可以方便地实现导航守卫(navigation-guards). 导航守卫(navigation-guards)这个名字,听起来怪怪的,但既然官方文档是这样翻译的,就姑且这么叫吧. 贴上文档地址:https://router.vuejs.org/zh-cn/advanced/navigation-guards.html 先来摘抄一段文档中beforeRou
vue实现登录后页面跳转到之前页面

在开发中我们经常遇到这样的需求,需要用户直接点击一个链接进入到一个页面,用户点击后链接后会触发401拦截返回登录界面,登录后又跳转到链接的页面而不是首页,这种问题该如何去做呢? 先说一下我们需要用到的几个API: 1.router.currentRoute:当前的路由信息对象,我们可以通过router.currentRoute.fullPath获得解析后的 URL,包含查询参数和 hash 的完整路径,如果要访问的页面的路由有命名(name)的话,可以通过router.currentRoute.
关于Vue Router中路由守卫的应用及在全局导航守卫中检查元字段的方法

#在切换路由时,组件会被复用,不过,这也意味着组件的生命周期钩子不会再被调用. 解决办法有两种,1简单地 watch (监测变化) $route 对象: const User = { template: '...', watch: { '$route' (to, from) { // 对路由变化作出响应... } } } 2.使用 2.2 中引入的 beforeRouteUpdate 导航守卫: const User = { template: '...', beforeRouteUpdate
vue利用全局导航守卫作登录后跳转到未登录前指定页面的实例代码

有这样一个场景:如果你在登录之前输入了http://localhost:8080/oauth2-mgm-app/#/userManage,想进入userManage页面,但是由于没有登录,系统是不会让你进入这个页面,之后会被定向到login页面.但是在登录之后,认为你有这个权限了,就需要重新定向到userManage页面.大致流程图如图1所示: 图1 登录后跳转到未登录前指定页面流程图在vue-route的官方文档里其实有给到过这个demo,官方文档链接在此:https://router.vu
Vue利用路由钩子token过期后跳转到登录页的实例

在Vue2.0中的路由钩子主要是用来拦截导航,让它完成跳转或前取消,可以理解为路由守卫. 分为全局导航钩子,单个路由独享的钩子,组件内钩子. 三种类型的钩子只是用的地方不一样,都接受一个函数作为参数,函数传入三个参数,分别为to,from,next. 其中next有三个方法 (1)next(); //默认路由 (2)next(false); //阻止路由跳转 (3)next({path:'/'}); //阻止默认路由,跳转到指定路径这里我使用了组件内钩子进行判断token过期后跳转到登录页,
关于Vue中的全局导航守卫(beforeEach、afterEach)

目录全局导航守卫(beforeEach.afterEach) 导航钩子有3个参数 beforeEach afterEach 全局导航守卫是干什么的? 1.在router中的index.js文件里引入vue-router 2.创建路由实例 3.挂载全局导航守卫全局导航守卫(beforeEach.afterEach) 在项目开发中每一次路由的切换或者页面的刷新都需要判断用户是否已经登录,前端可以判断,后端也会进行判断的,我们前端最好也进行判断. vue-router 提供了导航钩子:全局前置导航
Vue Router4路由导航守卫实例全面解析

目录前言一.什么是导航守卫二.全局前置守卫可选的第三个参数 next 三.全局解析守卫四.全局后置钩子五.路由独享的守卫六.组件内的守卫可用的配置 API 使用组合 API 七.完整的导航解析流程前言在写Vue项目的时候,少不了使用路由vue-router,而路由守卫是vue-router中一个非常重要的概念,也是非常重要的技巧.它能够很好的帮助开发者“监视”每一个跳转的路由. 一.什么是导航守卫正如其名,vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫
vue中的导航守卫使用及说明

目录导航守卫全局守卫独享守卫组件内守卫 vue导航守卫有哪些路由的钩子函数有六个全局路由钩子函数路由内的钩子函数组件内的钩子函数总结导航守卫作用:对路由进行权限控制分类:全局守卫.独享守卫.组件内守卫全局守卫 const router = new VueRouter({ routes: [ { path: '/home', component: Home, meta: { isAuth: false }, // 不需要进行权限控制 }, { path: '/user',
vue中全局路由守卫中替代this操作(this.$store/this.$vux)

全局路由守卫this.$vux.loading.hide()报错,访问不到this 解决办法申明变量代替this main.js文件方法 router.beforeEach((to, from, next) => { if(vue){ vue.$vux.loading.hide() }else{ } next() }) let vue = new Vue({ el: '#app', router, store, components: { App }, template: '<App/>
Session过期后自动跳转到登录页面的实例代码

最近做了一个项目其中有需求,要实现自动登录功能,通过查阅相关资料,打算用session监听来做,下面给大家列出了配置监听器的方法: 1.在项目的web.xml文件中添加如下代码:  <listener> <listener-class> 监听器路径 </listener-class> </listener> 2.编写java类. public class SessionListener implements
PyQt5实现用户登录GUI界面及登录后跳转

PyQt5是强大的GUI工具之一,通过其可以实现优秀的桌面应用程序.希望通过一个简单的登录页面可以让大家顺利入坑,如有不妥之处还请大佬指点改正! 导入业务需要的所有的扩展包. import sys # 系统参数操作 from PyQt5.QtWidgets import * # 模块包含创造经典桌面风格的用户界面提供了一套UI元素的类 from PyQt5.QtCore import * # 此模块用于处理时间.文件和目录.各种数据类型.流.URL.MIME类型.线程或进程 from PyQt5
spring security登录成功后跳转回登录前的页面

目录 spring security登录成功后跳转回登录前的页面需求如下代码如下 Springsecurity 配置文件和登录跳转项目结构直接上springsecurity配置文件自定义的登录页面login.html上需要加form标签登录框具体修改如下 spring security登录成功后跳转回登录前的页面我刚好碰到了这么一个需求,正好自己也刚开始学spring security,但是我百度了一下,发现都讲的好麻烦,其实大概了解完之后,亲自实践一下发现,操作非常简单. 需求如

vue利用全局导航守卫作登录后跳转到未登录前指定页面的实例代码

相关推荐

随机推荐