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

vue2、vue3中路由守卫变化

什么是路由守卫?

路由守卫就是路由跳转的一些验证,比如登录鉴权(没有登录不能进入个人中心页)等等等
路由守卫分为三大类:

  1. 全局守卫:前置守卫:beforeEach 后置钩子:afterEach

  2. 单个路由守卫:独享守卫:beforeEnter

  3. 组件内部守卫:beforeRouteEnter beforeRouteUpdate beforeRouteLeave
    所有的路由守卫都是三个参数:

    to: 要进入的目标路由(去哪儿)

    from: 要离开的路由(从哪来)

    next: 是否进行下一步(要不要继续

写next()相当于 next(true) 继续执行

不写 相当于next(false)终止执行

next(path)跳转 例如:next("/login")

注意:后置钩子afterEach没有next参数,我们来详细看看都是怎么使用的叭

全局守卫:

全局前置守卫beforEach:

给需要守卫的路由加上: meta: { permission: true },

router.beforeEach((to, from, next) => {if (to.meta.permission) {if (sessionStorage.getItem("token")) {next();} else {alert("请先登录");next("/login");}} else {next();}
});

全局后置钩子afterEach(少用)

router.afterEach((to, from) => {// to and from are both route objects.
});

单个路由守卫:

  // 首页模块路由{path: "/index",name: "index",meta: { permission: true },component: () => import("../views/Index.vue"),beforeEnter: function(to, from, next) {if (sessionStorage.getItem("token")) {next();} else {alert("请先登录");next("/login");}}},

组件内部守卫:

datacreatedmountedmethods处于平等关系

beforeRouteEnter举例说明:

  beforeRouteEnter(to, from, next) {// 在渲染该组件的对应路由被 confirm 前调用// 不!能!获取组件实例 `this`// 因为当守卫执行前,组件实例还没被创建if (sessionStorage.getItem("token")) {next();} else {alert("请先登录");next("/login");}},beforeRouteUpdate(to, from, next) {// 在当前路由改变,但是该组件被复用时调用// 可以访问组件实例 `this`},beforeRouteLeave(to, from, next) {// 导航离开该组件的对应路由时调用// 可以访问组件实例 `this`},

beforeRouteEnter 是进入前

beforeRouteUpdate 是路由变化时

beforeRouteLeave 是离开后。这个离开守卫通常用来禁止用户在还未保存修改前突然离开。该导航可以通过 next(false) 来取消。

注意:
beforeRouteEnter 守卫 不能 访问 this,因为守卫在导航确认前被调用,因此即将登场的新组件还没被创建。

vue2、vue3中路由守卫变化

router.beforeEach((to,from)=>{// 现在next可选// vue2 :// 写next()相当于 next(true) 继续执行// 不写 相当于next(false)终止执行// next(path) 跳转指定路由(重定向) //--------------------------------// vue3 :// 返回true | undefined 放行// 返回false取消// 返回路由地址(对象格式) 重定向})

例子:

// 访问权限控制
router.beforeEach((to) => {// 用户仓库const store = useUserStore()// 不需要登录的页面,白名单const wihteList = ['/login']// 如果没有登录(pinia中没有token)且不在白名单内,去登录if (!store.user?.token && !wihteList.includes(to.path)) return '/login'// 否则不做任何处理,什么都不返回则默认返回undefined
})

相关文章:

vue2、vue3中路由守卫变化

什么是路由守卫? 路由守卫就是路由跳转的一些验证,比如登录鉴权(没有登录不能进入个人中心页)等等等 路由守卫分为三大类: 全局守卫:前置守卫:beforeEach 后置钩子:afterEach 单个…...

Leetcode—547.省份数量【中等】

2023每日刷题(八) Leetcode—547.省份数量 实现代码 static int father[210] {0};int Find(int x) {if(x ! father[x]) {father[x] Find(father[x]);}return father[x]; }void Union(int x, int y) {int a Find(x);int b Find(y);if(a ! b) {fathe…...

Nginx 防盗链

nginx防盗链问题 盗链: 就是a网站有一张照片,b网站引用了a网站的照片 。 防盗链: a网站通过设置禁止b网站引用a网站的照片。 nginx防止网站资源被盗用模块 ngx_http_referer_module 如何区分哪些是不正常的用户? HTTP Referer…...

26. 通过 cilium pwru了解网络包的来龙去脉

pwru是一种基于eBPF的工具,可跟踪Linux内核中的网络数据包,并具有先进的过滤功能。它允许对内核状态进行细粒度检查,以便通过调试网络连接问题来解决传统工具(如iptables TRACE或tcpdump)难以解决甚至无法解决的问题。在本文中,我将介绍pwru如何在不必事先了解所有内容的…...

刷题笔记day01-数组

704 题 主要强调,左闭右闭的情况,就是每次查询都会和 [left, right] 进行比较。所以后面的都是mid-1,mid1 的情况。 package mainfunc search(nums []int, target int) int {// 二分查找方法// 每次查找都是左闭右闭的情况left : 0right : …...

C#调用C++ 的DLL传送和接收中文字符串

1 c#向c传送中文字符串 设置&#xff1a;将 字符集 改为 使用多字节字符集 cpp代码&#xff1a; extern "C"_declspec(dllexport) int input_chn_str(char in_str[]) {cout<<in_str<<endl;return 0; }c#代码&#xff1a; [DllImport("Demo.dll…...

【MySQL】数据库常见错误及解决

目录 2003错误&#xff1a;连接错误1251错误&#xff1a;身份验证错误1045错误&#xff1a;拒绝访问错误服务没有报告任何错误net start mysql 发生系统错误 5。 1064错误&#xff1a;语法错误1054错误&#xff1a;列名不存在1442错误&#xff1a;触发器中不能对本表增删改1303…...

spring常见问题汇总

1. 什么是spring? Spring是一个轻量级Java开发框架&#xff0c;最早有Rod Johnson创建&#xff0c;目的是为了解决企业级应用开发的业务 逻辑层和其他各层的耦合问题。它是一个分层的JavaSE/JavaEE full-stack&#xff08;一站式&#xff09;轻量级开源框架&#xff0c; 为开…...

java8 Lambda表达式以及Stream 流

Lambda表达式 Lambda表达式规则 Lambda表达式可以看作是一段可以传递的代码&#xff0c; Lambda表达式只能用于函数式接口&#xff0c;而函数式接口只有一个抽象方法&#xff0c;所以可以省略方法名&#xff0c;参数类型等 Lambda格式&#xff1a;&#xff08;形参列表&…...

基于Java的音乐网站管理系统设计与实现(源码+lw+部署文档+讲解等)

文章目录 前言具体实现截图论文参考详细视频演示为什么选择我自己的网站自己的小程序&#xff08;小蔡coding&#xff09; 代码参考数据库参考源码获取 前言 &#x1f497;博主介绍&#xff1a;✌全网粉丝10W,CSDN特邀作者、博客专家、CSDN新星计划导师、全栈领域优质创作者&am…...

【蓝桥】小蓝的疑问

1、题目 问题描述 小蓝和小桥上完课后&#xff0c;小桥回顾了课上教的树形数据结构&#xff0c;他在地上画了一棵根节点为 1 的树&#xff0c;并且对每个节点都赋上了一个权值 w i w_i wi​。 小蓝对小桥多次询问&#xff0c;每次询问包含两个整数 x , k x,k x,k&#xff…...

漏洞复现-海康威视综合安防管理平台信息泄露【附Poc】

目录 【产品介绍】 【产品系统UI】 【漏洞说明】 【指纹】 【Nuclei Poc】 【验证】 【产品介绍】 海康威视&#xff08;Hikvision&#xff09;是一家总部位于中国杭州的公司&#xff0c;是全球最大的视频监控产品供应商。除了传统的CCTV摄像机和网络摄像机&#xff0c;海…...

【完美世界】被骂国漫之耻,石昊人设战力全崩,现在真成恋爱世界了

【侵权联系删除】【文/郑尔巴金】 深度爆料&#xff0c;《完美世界》动漫第135集预告片已经更新了&#xff0c;但是网友们对此却是一脸槽点。从预告中可以看出&#xff0c;石昊在和战王战天歌的大战中被打成重伤&#xff0c;最后云曦也被战天歌抓住。在云曦面临生死危机的时候…...

34二叉树-BFS和DFS求树的深度

目录 LeetCode之路——104. 二叉树的最大深度 分析 解法一&#xff1a;广度优先遍历 解法二&#xff1a;深度优先遍历 总结 深度优先搜索 (DFS) 广度优先搜索 (BFS LeetCode之路——104. 二叉树的最大深度 给定一个二叉树 root &#xff0c;返回其最大深度。 二叉树的…...

Android Glide判断图像资源是否缓存onlyRetrieveFromCache,使用缓存数据,Kotlin

Android Glide判断图像资源是否缓存onlyRetrieveFromCache&#xff0c;使用缓存数据&#xff0c;Kotlin import android.graphics.Bitmap import android.os.Bundle import android.util.Log import android.widget.ImageView import androidx.appcompat.app.AppCompatActivity…...

设计模式之创建型模式

创建型模式与对象的创建有关。 创建型模式抽象了对象实例化的过程&#xff0c;这些设计模式提供了一种在创建对象的同时隐藏创建逻辑的方式&#xff0c;而不是使用 new 运算符直接实例化对象。创建型模式有以下 工厂模式&#xff08;Factory Method&#xff09; 意图&#xf…...

使用jdbc技术连接数据库

连接数据库 <dependencies><dependency><groupId>mysql</groupId><artifactId>mysql-connector-java</artifactId><version>8.0.28</version><scope>compile</scope></dependency> </dependencies> g…...

OpenLayers入门,快速搭建vue+OpenLayers地图脚手架项目

专栏目录: OpenLayers入门教程汇总目录 前言 本章针对Vue初学者,对Vue不熟悉,甚至还不会Vue的入门学生读者。 本章会详细讲解从NodeJS环境到npm环境的各个步骤,再到使用vue-cli脚手架快速生成项目,以及添加OpenLayers地图库依赖,编写简单的xyz高德地图显示页面的完整教…...

完成比写得好更重要,先完成初稿再说

我发现自己有个毛病&#xff0c;总想着满意了才动手。于是&#xff0c;经常做到一半跑去看文献&#xff0c;然后陷入文献中觉得这个比自己好&#xff0c;那个比自己好。于是&#xff0c;暂时中断手边工作&#xff0c;最后进度被推迟&#xff0c;甚至啥也没做出来。 今晚再次听…...

Spring boot 处理复杂json接收,同种类型、不同场景处理

场景&#xff1a; json大体格式一致&#xff0c;但是 ext_info 扩展字段对象&#xff0c;场景不同字段不同根据某字段类型,不同值&#xff0c;对应不同实现的 Component&#xff0c;处理不同场景这里根据 event&#xff0c;来做不同处理 {"data": {"event"…...

React Native 开发环境搭建(全平台详解)

React Native 开发环境搭建&#xff08;全平台详解&#xff09; 在开始使用 React Native 开发移动应用之前&#xff0c;正确设置开发环境是至关重要的一步。本文将为你提供一份全面的指南&#xff0c;涵盖 macOS 和 Windows 平台的配置步骤&#xff0c;如何在 Android 和 iOS…...

java 实现excel文件转pdf | 无水印 | 无限制

文章目录 目录 文章目录 前言 1.项目远程仓库配置 2.pom文件引入相关依赖 3.代码破解 二、Excel转PDF 1.代码实现 2.Aspose.License.xml 授权文件 总结 前言 java处理excel转pdf一直没找到什么好用的免费jar包工具,自己手写的难度,恐怕高级程序员花费一年的事件,也…...

【SpringBoot】100、SpringBoot中使用自定义注解+AOP实现参数自动解密

在实际项目中,用户注册、登录、修改密码等操作,都涉及到参数传输安全问题。所以我们需要在前端对账户、密码等敏感信息加密传输,在后端接收到数据后能自动解密。 1、引入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId...

多模态商品数据接口:融合图像、语音与文字的下一代商品详情体验

一、多模态商品数据接口的技术架构 &#xff08;一&#xff09;多模态数据融合引擎 跨模态语义对齐 通过Transformer架构实现图像、语音、文字的语义关联。例如&#xff0c;当用户上传一张“蓝色连衣裙”的图片时&#xff0c;接口可自动提取图像中的颜色&#xff08;RGB值&…...

Neo4j 集群管理:原理、技术与最佳实践深度解析

Neo4j 的集群技术是其企业级高可用性、可扩展性和容错能力的核心。通过深入分析官方文档,本文将系统阐述其集群管理的核心原理、关键技术、实用技巧和行业最佳实践。 Neo4j 的 Causal Clustering 架构提供了一个强大而灵活的基石,用于构建高可用、可扩展且一致的图数据库服务…...

12.找到字符串中所有字母异位词

&#x1f9e0; 题目解析 题目描述&#xff1a; 给定两个字符串 s 和 p&#xff0c;找出 s 中所有 p 的字母异位词的起始索引。 返回的答案以数组形式表示。 字母异位词定义&#xff1a; 若两个字符串包含的字符种类和出现次数完全相同&#xff0c;顺序无所谓&#xff0c;则互为…...

【Go语言基础【13】】函数、闭包、方法

文章目录 零、概述一、函数基础1、函数基础概念2、参数传递机制3、返回值特性3.1. 多返回值3.2. 命名返回值3.3. 错误处理 二、函数类型与高阶函数1. 函数类型定义2. 高阶函数&#xff08;函数作为参数、返回值&#xff09; 三、匿名函数与闭包1. 匿名函数&#xff08;Lambda函…...

Pydantic + Function Calling的结合

1、Pydantic Pydantic 是一个 Python 库&#xff0c;用于数据验证和设置管理&#xff0c;通过 Python 类型注解强制执行数据类型。它广泛用于 API 开发&#xff08;如 FastAPI&#xff09;、配置管理和数据解析&#xff0c;核心功能包括&#xff1a; 数据验证&#xff1a;通过…...

Mysql故障排插与环境优化

前置知识点 最上层是一些客户端和连接服务&#xff0c;包含本 sock 通信和大多数jiyukehuduan/服务端工具实现的TCP/IP通信。主要完成一些简介处理、授权认证、及相关的安全方案等。在该层上引入了线程池的概念&#xff0c;为通过安全认证接入的客户端提供线程。同样在该层上可…...

Copilot for Xcode (iOS的 AI辅助编程)

Copilot for Xcode 简介Copilot下载与安装 体验环境要求下载最新的安装包安装登录系统权限设置 AI辅助编程生成注释代码补全简单需求代码生成辅助编程行间代码生成注释联想 代码生成 总结 简介 尝试使用了Copilot&#xff0c;它能根据上下文补全代码&#xff0c;快速生成常用…...