vue路由守卫及路由守卫无限循环问题详析


Posted in Javascript onSeptember 05, 2019

先贴一波官方文档的内容

const router = new VueRouter({ ... })

router.beforeEach((to, from, next) => {
 // ...
})

当一个导航触发时,全局前置守卫按照创建顺序调用。守卫是异步解析执行,此时导航在所有守卫 resolve 完之前一直处于 等待中。

每个守卫方法接收三个参数:

  • to: Route: 即将要进入的目标 路由对象
  • from: Route: 当前导航正要离开的路由
  • next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。
    • next(): 进行管道中的下一个钩子。如果全部钩子执行完了,则导航的状态就是 confirmed (确认的)。
    • next(false): 中断当前的导航。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮),那么 URL 地址会重置到 from 路由对应的地址。
    • next('/') 或者 next({ path: '/' }): 跳转到一个不同的地址。当前的导航被中断,然后进行一个新的导航。你可以向 next 传递任意位置对象,且允许设置诸如 replace: true、name: 'home' 之类的选项以及任何用在 router-link 的 to prop 或 router.push 中的选项。
    • next(error): (2.4.0+) 如果传入 next 的参数是一个 Error 实例,则导航会被终止且该错误会被传递给 router.onError() 注册过的回调。确保要调用 next 方法,否则钩子就不会被 resolved

然后这是我自己的总结

import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/pages/login/Login'
import Index from '../pages/index/Index'
import Library from '../pages/library/Library'
import Design from '../pages/design/Design'
import Administration from '../pages/administration/Administration'
import Production from '../pages/production/Production'

import Global from '../common/global/Global'

Vue.use(Router)

const router = new Router({
 routes: [
 {
  path: '/',
  name: 'login',
  component: Login
 }, {
  path: '/index',
  name: 'index',
  component: Index
 }, {
  path: '/library',
  name: 'library',
  component: Library
 }, {
  path: '/design',
  name: 'design',
  component: Design
 }, {
  path: '/administration',
  name: 'administration',
  component: Administration
 }, {
  path: '/production',
  name: 'production',
  component: Production
 }
 ]
})

router.beforeEach ((to,from,next) => {
 //将所有需要登陆才显示的页面的路由都放进一个数组
 const nextRoute = ['index', 'library', 'design', 'administration', 'production'];
 //获取登陆状态
 let isLogin = Global.isLogin
 
 if(to.name === 'login') { //如果是登录页,则跳过验证
 next() //必不可少
 return //以下的代码不执行
 }
 if(nextRoute.indexOf(to.name) >= 0) { //判断该页面是否需要登陆
 if(!isLogin) { //判断登陆状态
  next({ name : 'login'}) //如果未登录,则跳转到登录页
 } else {
  next() //如果已经登陆,那就可以跳转
 }
 } else { //其他的无需登陆的页面不做验证
  next()
 }
 
})

export default router

这样就实现了全局路由守卫

关于路由守卫无限循环问题

如果你的代码是这样

if(isLogin) {
 next()
 } else {
 next({ name: 'login')}
 }

这样的话就会陷入无限循环

因为你的   next({ name: 'login')} 是相当于一个路由跳转,它会再次触发全局路由守卫,你又进入了全局路由守卫进行再次判断,如此循环。

所以,想要结束路由守卫,整段代码的逻辑必须由 next() 进行结尾。比如像我上面写的,当需要进入登录页的时候,

if(to.name === 'login') { 
 next() 
 return 
 }

加上这个判断,当你进入登录页的时候也会调用next() , 路由守卫进入确认状态,路由才会进行跳转

以上就是我在学习vue-router的路由守卫的总结

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
jQuery中判断一个元素是否为另一个元素的子元素(或者其本身)
Mar 21 Javascript
利用ajaxfileupload插件实现文件上传无刷新的具体方法
Jun 08 Javascript
Jquery easyui开启行编辑模式增删改操作
Jan 14 Javascript
微信小程序 动态传参实例详解
Apr 27 Javascript
纯js实现图片匀速淡入淡出效果
Aug 22 Javascript
JS简单实现数组去重的方法分析
Oct 14 Javascript
菊花转动的jquery加载动画效果
Aug 19 jQuery
JS中使用new Option()实现时间联动效果
Dec 10 Javascript
vue 开发之路由配置方法详解
Dec 02 Javascript
从Node.js事件触发器到Vue自定义事件的深入讲解
Jun 26 Javascript
VSCode插件安装完成后的配置(常用配置)
Aug 24 Javascript
详解JavaScript中的数据类型,以及检测数据类型的方法
Sep 17 Javascript
关于JS解构的5种有趣用法
Sep 05 #Javascript
vue draggable resizable gorkys与v-chart使用与总结
Sep 05 #Javascript
JavaScript获取某一天所在的星期
Sep 05 #Javascript
layui table设置某一行的字体颜色方法
Sep 05 #Javascript
微信小程序HTTP接口请求封装代码实例
Sep 05 #Javascript
layui table去掉右侧滑动条的实现方法
Sep 05 #Javascript
微信小程序下拉加载和上拉刷新两种实现方法详解
Sep 05 #Javascript
You might like
PHP 变量类型的强制转换
2009/10/23 PHP
解析CI即CodeIgniter框架在Nginx下的重写规则
2013/06/03 PHP
php header函数的常用http头设置
2015/06/25 PHP
php制作圆形用户头像的实例_自定义封装类源代码
2017/09/18 PHP
PHP实现数组根据某个字段进行水平合并,横向合并案例分析
2019/10/08 PHP
获取网站跟路径的javascript代码(站点及虚拟目录)
2009/10/20 Javascript
Jquery Ajax 学习实例2 向页面发出请求 返回JSon格式数据
2010/03/15 Javascript
extjs grid设置某列背景颜色和字体颜色的方法
2010/09/03 Javascript
parentElement,srcElement的使用小结
2014/01/13 Javascript
前端必备神器 Snap.svg 弹动效果
2014/11/10 Javascript
js实现将选中值累加到文本框的方法
2015/08/12 Javascript
AngularJs Scope详解及示例代码
2016/09/01 Javascript
js原生之焦点图转换加定时器实例
2016/12/12 Javascript
JS实现table表格固定表头且表头随横向滚动而滚动
2017/10/26 Javascript
360提示[高危]使用存在漏洞的JQuery版本的解决方法
2017/10/27 jQuery
详解vue中点击空白处隐藏div的实现(用指令实现)
2018/04/19 Javascript
5个你不知道的JavaScript字符串处理库(小结)
2020/06/01 Javascript
JS highcharts动态柱状图原理及实现
2020/10/16 Javascript
[03:23:49]2016.12.17日完美“圣”典全回顾
2016/12/19 DOTA
用pywin32实现windows模拟鼠标及键盘动作
2014/04/22 Python
详解在Python和IPython中使用Docker
2015/04/28 Python
Python二叉树的定义及常用遍历算法分析
2017/11/24 Python
python在非root权限下的安装方法
2018/01/23 Python
python微信跳一跳游戏辅助代码解析
2018/01/29 Python
pytorch 实现张量tensor,图片,CPU,GPU,数组等的转换
2020/01/13 Python
Python+unittest+DDT实现数据驱动测试
2020/11/30 Python
新加坡航空官方网站:Singapore Airlines
2016/10/13 全球购物
英国文具、办公用品和科技商店:Ryman
2018/09/27 全球购物
印度在线购物网站:Paytmmall
2019/07/24 全球购物
应届毕业生个人自荐信范文
2013/11/30 职场文书
职业生涯规划书的格式
2013/12/29 职场文书
求职毕业生自荐书
2014/02/08 职场文书
酒店财务经理岗位职责
2015/04/08 职场文书
刑事案件上诉状
2015/05/23 职场文书
2016开学第一课心得体会
2016/01/23 职场文书
Java的Object类的九种方法
2022/04/13 Java/Android