当前位置: 首页 > 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环境
  • 【399天】跃迁之路——程序员高效学习方法论探索系列(实验阶段156-2018.03.11)...
  • CentOS从零开始部署Nodejs项目
  • Date型的使用
  • flutter的key在widget list的作用以及必要性
  • HTTP 简介
  • Leetcode 27 Remove Element
  • 阿里云ubuntu14.04 Nginx反向代理Nodejs
  • 闭包--闭包作用之保存(一)
  • 产品三维模型在线预览
  • 对JS继承的一点思考
  • 简析gRPC client 连接管理
  • 如何胜任知名企业的商业数据分析师?
  • 移动端唤起键盘时取消position:fixed定位
  • 原生JS动态加载JS、CSS文件及代码脚本
  • TPG领衔财团投资轻奢珠宝品牌APM Monaco
  • 微龛半导体获数千万Pre-A轮融资,投资方为国中创投 ...
  • #mysql 8.0 踩坑日记
  • (C语言)字符分类函数
  • (第61天)多租户架构(CDB/PDB)
  • (第一天)包装对象、作用域、创建对象
  • (附源码)ssm教材管理系统 毕业设计 011229
  • (六)c52学习之旅-独立按键
  • (十)【Jmeter】线程(Threads(Users))之jp@gc - Stepping Thread Group (deprecated)
  • (十五)devops持续集成开发——jenkins流水线构建策略配置及触发器的使用
  • (转载)PyTorch代码规范最佳实践和样式指南
  • .NET 4 并行(多核)“.NET研究”编程系列之二 从Task开始
  • .NET MAUI学习笔记——2.构建第一个程序_初级篇
  • .Net(C#)常用转换byte转uint32、byte转float等
  • .net知识和学习方法系列(二十一)CLR-枚举
  • :如何用SQL脚本保存存储过程返回的结果集
  • @zabbix数据库历史与趋势数据占用优化(mysql存储查询)
  • [ACM] hdu 1201 18岁生日
  • [Android 数据通信] android cmwap接入点
  • [C# 开发技巧]如何使不符合要求的元素等于离它最近的一个元素
  • [C#]使用DlibDotNet人脸检测人脸68特征点识别人脸5特征点识别人脸对齐人脸比对FaceMesh
  • [C++]18:set和map的使用
  • [C++]STL之map
  • [CareerCup] 6.1 Find Heavy Bottle 寻找重瓶子
  • [CSS] 点击事件触发的动画
  • [DM复习]关联规则挖掘(下)