vue3中路由守卫的快速上手

路由守卫或者说路由拦截,在我们实际开发前端项目中是经常用到的操作;

通过路由守卫,可以在用户访问某个路由之前进行权限验证。(全局前置守卫)例如,可以检查用户是否登录,是否具有访问该路由的权限,如果不满足条件,则可以将用户重定向到其他页面或显示相应的提示信息。

全局前置守卫(在每次路由跳转之前被触发)

可以使用 router.beforeEach 注册一个全局前置守卫

// 前置守卫router.beforeEach((to, from) => {}
)

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

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

to: 即将要进入的目标 

from: 当前导航正要离开的路由 

可以返回的值如下:

  • false: 取消当前的导航。如果浏览器的 URL 改变了(可能是用户手动或者浏览器后退按钮),那么 URL 地址会重置到 from 路由对应的地址。
  • 一个路由地址: 通过一个路由地址重定向到一个不同的地址,如同调用 router.push(),且可以传入诸如 replace: true 或 name: 'home' 之类的选项。它会中断当前的导航,同时用相同的 from 创建一个新导航。
// 前置守卫
// 全局拦截、除了登录页面,其他页面都必须授权(这里为pinia定义的token不为空)才能访问
router.beforeEach((to, from) => {
const useToken=useTokenStore()
if (to.name !== 'login' && !useToken.token) {return { name: 'Login' }
}
else{return true}
}
)

在这个路由全局拦截方法中,我们规定如果只有login页面才能被所有人访问,访问的页面不是login页面都要有身份认证(pinia定义的token)才行,如果没有、则会自动跳到login登录页面,这在我们前端开发中是经常用到的。

如果遇到了意料之外的情况,可能会抛出一个 Error。这会取消导航并且调用 router.onError() 注册过的回调。

如果什么都没有,undefined 或返回 true则导航是有效的,并调用下一个导航守卫

可选的第三个参数 next

在之前的 Vue Router 版本中(vue-router3),还可以使用 第三个参数 next 。在最新版的vue-router4版本中,官方移除了next参数,推荐我们只使用to、from这两个参数。然而,它仍然是被支持的,这意味着你可以向任何导航守卫传递第三个参数。

在这种情况下,确保 next 在任何给定的导航守卫中都被严格调用一次它可以出现多于一次,但是只能在所有的逻辑路径都不重叠的情况下,否则钩子永远都不会被解析或报错。

错误的next使用方法:(这时,如果用户没有携带token,那么next会被调用两次)

// 前置守卫
// 全局拦截、除了登录页面,其他页面都必须授权(这里为pinia定义的token不为空)才能访问
router.beforeEach((to, from, next) => {
const useToken=useTokenStore()
if (to.name !== 'login' && !useToken.token) {next({name: 'login'})
}next()}
)

正确的用法:(务必确保next只被调用一次)

// 前置守卫
// 全局拦截、除了登录页面,其他页面都必须授权(这里为pinia定义的token不为空)才能访问
router.beforeEach((to, from, next) => {
const useToken=useTokenStore()
if (to.name !== 'login' && !useToken.token) {next({name: 'login'})
}
else{next()
}
}
)

全局后置钩子(在每次路由跳转之后被触发)

可以注册全局后置钩子,然而和守卫不同的是,这些钩子不会改变导航本身

// 后置守卫
router.afterEach((to, from) => {
console.log('路由跳转的路径====>',to.path)
}
)

一般来说,我们经常使用前置钩子,因为它能够在我们跳转路由之前进行拦截。后置钩子我们一般用于分析、记录日志、声明页面等辅助功能以及许多其他事情都很有用。

全局解析守卫

可以用 router.beforeResolve 注册一个全局守卫。它在每次导航时都会触发,不同的是,解析守卫刚好会在导航被确认之前、所有组件内守卫和异步路由组件被解析之后调用。这意味着在路由对象被创建之后,但还没有被解析或渲染时,全局解析守卫将会被触发。

router.beforeResolve( to => {if (to.meta.requiresCamera) {try {} catch (error) {if (error instanceof NotAllowedError) {// 处理错误,然后取消导航return false} else {// 意料之外的错误,取消导航并把错误传给全局处理器throw error}}}
})

router.beforeResolve 是获取数据或执行任何其他操作(如果用户无法进入页面时你希望避免执行的操作)的理想位置。

组件内的守卫

组件内的守卫分为三种:

beforeRouteEnter:在渲染该组件的对应路由被验证前调用 ,当守卫执行时,组件实例还没被创建!

注意:在 vue3 中的 setup 函数中是不可以使用 beforeRouterEnter 这个路由守卫的

方法一、我们可以在设置路由的时候,使用beforeEnter方法拦截,即在router.js中:

{path: '/users/:id',component: UserDetails,beforeEnter: (to, from) => {
// 可以在定义路由的时候监听from和toreturn false},}

方法二、使用选项式api,就可以使用beforeRouterEnter这个钩子了

<script>
export default {beforeRouteEnter(to, from) {console.log('before router enter', to, from)}
}
</script>

beforeRouteUpdate: 在当前路由改变,但是该组件被复用时调用

举例来说,对于一个带有动态参数的路径 `/users/:id`,在 `/users/1` 和 `/users/2` 之间跳转的时候

// 在当前路由改变,但是该组件被复用时调用
// 举例来说,对于一个带有动态参数的路径 `/users/:id`,在 `/users/1` 和 `/users/2` 之间跳转的时候
onBeforeRouteUpdate((to,from)=>{
console.log(from.path,'更新为了',to.path);}

beforeRouteLeave:在导航离开渲染该组件的对应路由时调用

  // 在导航离开渲染该组件的对应路由时调用
onBeforeRouteLeave((to,from)=>{
console.log(from.path,'离开了');})

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/609160.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

P1025 [NOIP2001 提高组] 数的划分———C++(动态规划、DFS)

目录 [NOIP2001 提高组] 数的划分题目描述输入格式输出格式样例 #1样例输入 #1样例输出 #1 提示 动态规划的解题思路Code运行结果DFSCode运行结果 [NOIP2001 提高组] 数的划分 题目描述 将整数 n n n 分成 k k k 份&#xff0c;且每份不能为空&#xff0c;任意两个方案不相…

FCRP第一题详解一

先看效果&#xff1a; 20240106-094943 看他的第一要求&#xff1a; 1.整个模板只能出现一个数据集&#xff0c;下拉复选框与报表主体共用一个数据集&#xff0c;且不影响互相显示。 所以这里不能通过SQL语句来过滤&#xff0c;SQL语句中中只能全部查询出来&#xff0c;这样保…

Linux———head,tail命令详解(狠狠爱住)

目录 head 命令&#xff1a; head 命令基本语法&#xff1a; 常用选项 示例 显示文件的前 10 行&#xff1a; 显示文件的前 5 行&#xff1a; 显示文件的前 100 个字节&#xff1a; 不显示文件名的标题信息&#xff1a; 显示文件名的标题信息&#xff1a; tail 命令&…

基于JAVA+SpringBoot的咖啡商城

✌全网粉丝20W,csdn特邀作者、博客专家、CSDN新星计划导师、java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取项目下载方式&#x1f345; 一、项目背景介绍&#xff1a; 随着互联网的普及和发…

Transformer从菜鸟到新手(五)

引言 上篇文章我们在单卡上完成了完整的训练过程。 从本文开始介绍模型训练/推理上的一些优化技巧&#xff0c;本文主要介绍多卡并行训练。 下篇文章将介绍大模型推理常用的缓存技术。 多卡训练 第一个要介绍的是利用多GPU优化&#xff0c;因为在单卡上训练实在是太慢。这…

11.23 校招 实习 内推 面经

绿*泡*泡&#xff1a; neituijunsir 交流裙 &#xff0c;内推/实习/校招汇总表格 1、校招&社招&实习丨图森未来传感器标定工程师招聘&#xff08;内推&#xff09; 校招&社招&实习丨图森未来传感器标定工程师招聘&#xff08;内推&#xff09; 2、校招 | 吉…

java开发中如何使用定时任务

定时任务概述&#xff1a; 任务调度&#xff1a; 是指系统为了自动完成特定任务&#xff0c;在约定的特定时刻执行任务的过程。有了任务调度&#xff0c;即可解放更多的人力&#xff0c;而是由系统自动去执行任务。 常用业务场景案例&#xff1a; 某电商系统需要在每天上午10点…

利用“与非”运算实现布尔代数中的与,或,非三种运算

什么是“与非”运算&#xff1f; 要想明白“与非”运算&#xff0c;首先要明白“与”运算和“非”运算。 “与”运算在离散数学中叫做合取式&#xff0c;也就是A和B相同时为1的时候结果才为1&#xff0c;其余情况都为0 下面是“与”运算的真值表 “非”运算在离散数学中叫做否…

面试经典150题(78-81)

leetcode 150道题 计划花两个月时候刷完&#xff0c;今天&#xff08;第三十六天&#xff09;完成了4道(78-81)150&#xff1a; 78.&#xff08;230. 二叉搜索树中第K小的元素&#xff09;题目描述&#xff1a; 给定一个二叉搜索树的根节点 root &#xff0c;和一个整数 k &a…

网络协议与攻击模拟_01winshark工具简介

一、TCP/IP协议簇 网络接口层&#xff08;没有特定的协议&#xff09; 物理层&#xff1a;PPPOE宽带拨号&#xff08;应用场景&#xff1a;宽带拨号&#xff0c;运营商切网过来没有固定IP就需要拨号&#xff0c;家庭带宽一般都采用的是拨号方式&#xff09;数据链路层网络层…

基于共享储能电站的工业用户日前优化经济调度【复现】

文章提出一种基于共享储能电站的工业用户日前优化经济调度方法。首先提出共享储能电站的概念&#xff0c;分析其 商业运营模式。然后将共享储能电站应用到工业用户经济优化调度中&#xff0c;通过协调各用户使用共享储能电站进行充电和 放电的功率&#xff0c;实现用户群日运行…

Python与人工智能

Python 是一种广泛用于人工智能&#xff08;AI&#xff09;开发的编程语言。Python具有简洁的语法和强大的库支持&#xff0c;使其成为数据科学、机器学习和深度学习的理想选择。 Python中有许多库可以帮助实现人工智能&#xff0c;其中最流行的包括TensorFlow和PyTorch。这些…

Java 访问控制权限

访问控制权限 访问控制权限有哪些&#xff1f;4个 private 私有 protected 受保护 public 公开 默认 以上的4个访问控制权限&#xff1a;控制的范围是什么&#xff1f; private 表示私有的&#xff0c;只能在本类中访问 public 表示公开的&#xff0c;在任何位置都可以访问 默认…

越南童模受邀参加上海顶级奢侈大秀

陈宝珠 - 2010年出生 - 从小就参与艺术 - 宝珠家庭中的长女。自幼就参加艺术活动&#xff0c;并在现代舞、编舞、古装舞、走秀等方面表现出色&#xff0c;在每一个科目上&#xff0c;宝珠都展现了她的风格和才华。 - 多次获得在越南艺术大赛冠军如&#xff1a;IKIDS越南冠军、T…

Java学习笔记-day04-NIO核心依赖多路复用小记

NIO允许一个线程同时处理多个连接&#xff0c;而不会因为一个连接的阻塞而导致其他连接被阻塞。核心是依赖操作系统的多路复用机制。 操作系统的多路复用机制 多路复用是一种操作系统的 I/O 处理机制&#xff0c;允许单个进程&#xff08;或线程&#xff09;同时监视多个输入…

C++:通过erase删除map的键值对

map是经常使用的数据结构,erase可以删除map中的键值对。 可以通过以下几种方式使用erase 1.通过迭代器进行删除 #include <iostream> #include <map> #include <string> using namespace std;void pMap(const string& w, const auto& m) {cout&l…

Linux第5步_测试虚拟机网络连接

安装好VMwareTools后&#xff0c;就可以测试虚拟机网络连接了&#xff0c;目的是实现虚拟机上网。 1、打开“控制面板”&#xff0c;得到下图&#xff1a; 2、双击“网络和 Internet” &#xff0c;得到下图&#xff1a; 3、双击“网络和共享中心” 4、点击“更改适配器设置”…

rime中州韵小狼毫 中英互绎 滤镜

英文在日常生活中已经随处可见&#xff0c;我们一般中英互译需要使用专业的翻译软件来实现。但如果我们在输入法中&#xff0c;在输入中文的时候&#xff0c;可以顺便瞟一眼对应的英文词汇&#xff0c;或者在输入英文的时候可以顺便了解对应的中文词汇&#xff0c;那将为我们的…

linux网络配置

一、查看Linux基础得网络设置 1.网关——route -n 2.IP地址——ifconfig 或 ip a ethtool -p ens33 让ens33网卡快速闪烁&#xff0c;分辨网线对应哪个网卡 3.DNS服务器——cat /etc/resolv.conf 4.主机名——hostname 5.路由——route 6.网络连接状态——ss 或 net…

【Java并发】聊聊concurrentHashMap的put核心流程

结构介绍 1.8中concurrentHashMap采用数组链表红黑树的方式存储&#xff0c;并且采用CASSYN的方式。在1.7中主要采用的是数组链表&#xff0c;segment分段锁reentrantlock。本篇主要在1.8基础上介绍下. 那么&#xff0c;我们的主要重点是分析什么呢&#xff0c;其实主要就是p…