当前位置: 首页 > news >正文

(已解决)什么是vue导航守卫

vue导航守卫是是一种Vue Router内置的功能,它可以让我们在路由切换的过程中执行自定义的代码逻辑。
举一个简单的例子:

import Vue from 'vue';
import Router from 'vue-router';Vue.use(Router);const router = new Router({// 路由配置...
});// 全局前置导航守卫
router.beforeEach((to, from, next) => {// 获取当前用户的登录状态(这里仅作示例,实际项目中可能来自vuex或localStorage)let isLoggedIn = !!localStorage.getItem('userToken');if (to.meta.requiresAuth && !isLoggedIn) {// 判断目标路由是否要求认证(通过meta字段标记),若未登录则重定向到登录页面next({ path: '/login', query: { redirect: to.fullPath } });} else {// 用户已登录或目标路由无需认证,允许继续导航next();}
});export default router;

在这个例子中,每当试图切换到一个设置了 requiresAuth: true 的路由时,导航守卫会先检查用户是否已经登录(通过检查localStorage中的token)。如果没有登录,它会阻止原本的跳转操作,并将用户重定向到登录页面。如果用户已登录,则放行,允许路由正常跳转。这就是Vue导航守卫在实际应用场景中起到的作用。

相关文章:

  • 蓝桥杯2023年第十四届省赛真题----棋盘
  • 将xyz格式的GRACE数据转成geotiff格式
  • 用HTML5实现灯笼效果
  • chisel RegInit/UInt/U
  • 测试管理_利用python连接禅道数据库并自动统计bug数据到钉钉群
  • Rust 初体验2
  • 最小生成树——Prim/Kruskal Python
  • Windows 安装 MySQL 最新最简教程
  • 使用Linux docker方式快速安装Plik并结合内网穿透实现公网访问
  • 百卓Smart管理平台 uploadfile.php 文件上传漏洞(CVE-2024-0939)
  • -转换流-
  • 08-Java过滤器模式 ( Filter Pattern )
  • QT设置qss
  • 11 插入排序和希尔排序
  • 《Docker极简教程》--Docker环境的搭建--在Mac上搭建Docker环境
  • [rust! #004] [译] Rust 的内置 Traits, 使用场景, 方式, 和原因
  • [译] React v16.8: 含有Hooks的版本
  • 「前端早读君006」移动开发必备:那些玩转H5的小技巧
  • Git 使用集
  • JavaScript 是如何工作的:WebRTC 和对等网络的机制!
  • js学习笔记
  • Logstash 参考指南(目录)
  • vue-loader 源码解析系列之 selector
  • WinRAR存在严重的安全漏洞影响5亿用户
  • 二维平面内的碰撞检测【一】
  • 欢迎参加第二届中国游戏开发者大会
  • 聊聊redis的数据结构的应用
  • 漫谈开发设计中的一些“原则”及“设计哲学”
  • 普通函数和构造函数的区别
  • 推荐一个React的管理后台框架
  • Salesforce和SAP Netweaver里数据库表的元数据设计
  • ​MPV,汽车产品里一个特殊品类的进化过程
  • # Apache SeaTunnel 究竟是什么?
  • #我与Java虚拟机的故事#连载09:面试大厂逃不过的JVM
  • $().each和$.each的区别
  • (12)Hive调优——count distinct去重优化
  • (6)STL算法之转换
  • (c语言)strcpy函数用法
  • (Redis使用系列) Springboot 使用redis的List数据结构实现简单的排队功能场景 九
  • (草履虫都可以看懂的)PyQt子窗口向主窗口传递参数,主窗口接收子窗口信号、参数。
  • (动手学习深度学习)第13章 计算机视觉---图像增广与微调
  • (二)hibernate配置管理
  • (力扣)1314.矩阵区域和
  • (三)uboot源码分析
  • (五)关系数据库标准语言SQL
  • (转)Google的Objective-C编码规范
  • *(长期更新)软考网络工程师学习笔记——Section 22 无线局域网
  • .form文件_一篇文章学会文件上传
  • .mysql secret在哪_MySQL如何使用索引
  • .NET Core 控制台程序读 appsettings.json 、注依赖、配日志、设 IOptions
  • .NET Core工程编译事件$(TargetDir)变量为空引发的思考
  • .NET Core日志内容详解,详解不同日志级别的区别和有关日志记录的实用工具和第三方库详解与示例
  • @ResponseBody
  • [ SNOI 2013 ] Quare
  • [20190113]四校联考