Vue3 中 导航守卫 的使用

在Vue 3中,导航守卫(Navigation Guards)用于在路由切换前后执行一些操作,例如验证用户权限、取消路由导航等。Vue 3中的导航守卫与Vue 2中的导航守卫略有不同。下面是Vue 3中导航守卫的使用方式:

  1. 全局前置守卫(Global Before Guards):

    • beforeEach:在路由切换前执行,可以用来进行权限验证或其他全局操作。
    • 使用方法:
      import { createRouter, createWebHistory } from 'vue-router';const router = createRouter({history: createWebHistory(),routes: [...]
      });router.beforeEach((to, from, next) => {// 执行一些操作,例如权限验证// 如果要继续路由导航,调用next();如果要取消导航,调用next(false)next();
      });export default router;
      
  2. 全局后置守卫(Global After Guards):

    • afterEach:在路由切换后执行,可以用来进行一些全局操作,例如页面统计。
    • 使用方法:
      import { createRouter, createWebHistory } from 'vue-router';const router = createRouter({history: createWebHistory(),routes: [...]
      });router.afterEach((to, from) => {// 执行一些操作,例如页面统计
      });export default router;
      
  3. 路由独享守卫(Per-Route Guards):

    • beforeEnter:在单个路由配置中定义,只对该路由生效。
    • 使用方法:
      import { createRouter, createWebHistory } from 'vue-router';const router = createRouter({history: createWebHistory(),routes: [{path: '/example',component: ExampleComponent,beforeEnter: (to, from, next) => {// 在进入该路由前执行一些操作next();}},// 其他路由配置...]
      });export default router;
      
  4. 组件内的守卫(In-Component Guards):

    • beforeRouteEnter:在进入路由前执行,可以访问组件实例。
    • beforeRouteUpdate:在当前路由复用组件时执行,例如从 /user/1 切换到 /user/2
    • beforeRouteLeave:在离开当前路由前执行。
    • 使用方法:
      import { ref } from 'vue';export default {beforeRouteEnter(to, from, next) {// 在进入路由前执行一些操作next();},beforeRouteUpdate(to, from, next) {// 在当前路由复用组件时执行一些操作next();},beforeRouteLeave(to, from, next) {// 在离开当前路由前执行一些操作next();},// 组件其他配置...
      };
      

这些导航守卫可以在Vue 3中的路由配置中使用,用于控制路由的导航行为和执行一些额外的操作

实现登录

  1. 创建一个用于存储登录状态的全局变量,例如 isLoggedIn,并设置初始值为 false

  2. 在全局前置守卫中检查登录状态,如果用户未登录且访问的是需要登录才能访问的页面,则取消导航并重定向到登录页面。

import { createRouter, createWebHistory } from 'vue-router';const router = createRouter({history: createWebHistory(),routes: [...]
});router.beforeEach((to, from, next) => {// 检查登录状态if (to.meta.requiresAuth && !isLoggedIn.value) {next('/login'); // 重定向到登录页面} else {next(); // 继续路由导航}
});export default router;
  1. 在登录页面的组件内,使用 beforeRouteEnter 守卫来执行登录操作,并将登录状态设置为 true
import { ref } from 'vue';export default {beforeRouteEnter(to, from, next) {// 在进入路由前执行登录操作// 假设登录成功后将登录状态设置为trueisLoggedIn.value = true;next();},// 组件其他配置...
};
  1. 在其他需要登录才能访问的页面的组件内,使用 beforeRouteEnter 守卫来检查登录状态,如果用户未登录,则取消导航并重定向到登录页面。
import { ref } from 'vue';export default {beforeRouteEnter(to, from, next) {// 检查登录状态if (!isLoggedIn.value) {next('/login'); // 重定向到登录页面} else {next(); // 继续路由导航}},// 组件其他配置...
};

通过以上步骤,您可以使用这四个守卫方法来实现登录功能。在全局前置守卫中检查登录状态,如果用户未登录且访问的是需要登录才能访问的页面,则取消导航并重定向到登录页面。在登录页面的组件内,使用 beforeRouteEnter 守卫来执行登录操作,并将登录状态设置为 true。在其他需要登录才能访问的页面的组件内,使用 beforeRouteEnter 守卫来检查登录状态,如果用户未登录,则取消导航并重定向到登录页面。

完整示例

下面是一个完整的实例代码,演示如何使用守卫来实现登录功能:

// main.js
import { createApp } from 'vue';
import App from './App.vue';
import { createRouter, createWebHistory } from 'vue-router';const router = createRouter({history: createWebHistory(),routes: [{path: '/login',component: LoginComponent,meta: { requiresAuth: false } // 不需要登录才能访问},{path: '/dashboard',component: DashboardComponent,meta: { requiresAuth: true } // 需要登录才能访问},// 其他路由配置...]
});router.beforeEach((to, from, next) => {// 检查登录状态if (to.meta.requiresAuth && !isLoggedIn.value) {next('/login'); // 重定向到登录页面} else {next(); // 继续路由导航}
});const app = createApp(App);
app.use(router);
app.mount('#app');
// LoginComponent.vue
import { ref } from 'vue';export default {beforeRouteEnter(to, from, next) {// 在进入路由前执行登录操作// 假设登录成功后将登录状态设置为trueisLoggedIn.value = true;next();},// 组件其他配置...
};
// DashboardComponent.vue
import { ref } from 'vue';export default {beforeRouteEnter(to, from, next) {// 检查登录状态if (!isLoggedIn.value) {next('/login'); // 重定向到登录页面} else {next(); // 继续路由导航}},// 组件其他配置...
};

这个示例中,我们创建了一个简单的Vue应用,并使用Vue Router来管理路由。在路由配置中,我们定义了两个路由:/login/dashboard/login路由对应的组件是LoginComponent,不需要登录才能访问,/dashboard路由对应的组件是DashboardComponent,需要登录才能访问。

在全局前置守卫中,我们检查了路由的meta字段,如果requiresAuthtrue且用户未登录,则重定向到登录页面。否则,继续路由导航。

LoginComponent组件的beforeRouteEnter守卫中,我们模拟了登录操作,并将登录状态设置为true

DashboardComponent组件的beforeRouteEnter守卫中,我们检查了登录状态,如果用户未登录,则重定向到登录页面。

这样,我们就使用每个守卫来实现了登录功能

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

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

相关文章

java八股文面试[JVM]——垃圾回收

参考:JVM学习笔记(一)_卷心菜不卷Iris的博客-CSDN博客 GC垃圾回收面试题: JVM内存模型以及分区,需要详细到每个区放什么 堆里面的分区:Eden,survival from to,老年代,各…

go 方法

golang方法 go语言没有面向对象的特性,也没有类对象的概念。但是,可以使用结构体来模拟这些特性,我们都知道面向对象里面有类方法等概念。我们也可以声明一些方法,属于某个结构体go语言方法的语法 go中方法,是一种特殊…

Golang GORM 单表删除

删除只有一个操作,delete。也是先找到再去删除。 可以删除单条记录,也可以删除多条记录。 var s Studentdb.Debug().Delete(&s, "age ?", 100)fmt.Println(s)[15.878ms] [rows:1] DELETE FROM student WHERE age 100var s Studentdb.De…

2023-08-21 LeetCode每日一题(移动片段得到字符串)

2023-08-21每日一题 一、题目编号 2337. 移动片段得到字符串二、题目链接 点击跳转到题目位置 三、题目描述 给你两个字符串 start 和 target ,长度均为 n 。每个字符串 仅 由字符 ‘L’、‘R’ 和 ‘_’ 组成,其中: 字符 ‘L’ 和 ‘R…

基于swing的零件销售系统java jsp客户信息维护mysql源代码

本项目为前几天收费帮学妹做的一个项目,Java EE JSP项目,在工作环境中基本使用不到,但是很多学校把这个当作编程入门的项目来做,故分享出本项目供初学者参考。 一、项目描述 基于swing的零件销售系统 系统有1权限:管…

论文阅读 - Understanding Diffusion Models: A Unified Perspective

文章目录 1 概述2 背景知识2.1 直观的例子2.2 Evidence Lower Bound(ELBO)2.3 Variational Autoencoders(VAE)2.4 Hierachical Variational Autoencoders(HVAE) 3 Variational Diffusion Models(VDM)4 三个等价的解释4.1 预测图片4.2 预测噪声4.3 预测分数 5 Guidance5.1 Class…

【Java从入门到精通|1】从特点到第一个Hello World程序

写在前面 在计算机编程领域,Java是一门广泛应用的高级编程语言。它以其强大的跨平台性能、丰富的库和生态系统以及易于学习的语法而备受开发者欢迎。本文将引导您逐步了解Java的特点、如何安装和配置开发环境,以及如何编写您的第一个Java程序。 一、Java…

Oracle数据库表空间

1. 表空间及表空间文件相关查询 1.1 查表空间使用率情况(含临时表空间) SELECT d.tablespace_name "Name",d.status "Status",TO_CHAR(NVL(a.BYTES / 1024 / 1024, 0), 99,999,990.90) "Size (M)",TO_CHAR(NVL(a.BYTES …

回归预测 | MATLAB实现BES-LSSVM秃鹰搜索算法优化最小二乘支持向量机多输入单输出回归预测(多指标,多图)

回归预测 | MATLAB实现BES-LSSVM秃鹰搜索算法优化最小二乘支持向量机多输入单输出回归预测(多指标,多图) 目录 回归预测 | MATLAB实现BES-LSSVM秃鹰搜索算法优化最小二乘支持向量机多输入单输出回归预测(多指标,多图&a…

CSS :mix-blend-mode、aspect-ratio

mix-blend-mode 元素的内容应该与元素的直系父元素的内容和元素的背景如何混合。 mix-blend-mode: normal; // 正常mix-blend-mode: multiply; // 正片叠底mix-blend-mode: screen; // 滤色mix-blend-mode: overlay; // 叠加mix-blend-mode: darken; // 变暗mix-blend-mode: …

Redis中的淘汰策略

前言 本文主要说明在Redis面临key过期和内存不足的情况时,可以采用什么策略进行解决问题。 Redis中是如何应对过期数据的 正如我们知道的Redis是基于内存的、单线程的一个中间件,在面对过期数据的时候,Redis并不会去直接把它从内存中进行剔…

Redis 缓存满了怎么办?

引言 Redis 缓存使用内存来保存数据,随着需要缓存的数据量越来越大,有限的缓存空间不可避免地会被写满。此时,应该怎么办?本篇文章接下来就来聊聊缓存满了之后的数据淘汰机制。 值得注意的是,在 Redis 中 过期策略 和…

C. Another Array Problem

思路:这个题没想到吧数先往0上搞,然后一直想不出来,为什么要先往0上搞呢,对于每个数来说,它最大只会变成这一堆数的最大值,所以我们考虑能不能变成最大值,那么只要是两个相等的数通过一次操作就…

关于JSONObject以及JSONArray对象的相关转化

1.JSONObject转换为Map对象 public static Map<String,Object> transformJsonToMap(JSONObject jsonObject){Map<String,Object> mapObj new HashMap<>();//循环转换for (Map.Entry<String, Object> entry : jsonObject.entrySet()) {mapObj.put(ent…

xcode14.3更新一系列问题

1. Missing file libarclite_iphoneos.a (Xcode 14.3) 解决方法 Xcode升级到14.3后编译失败&#xff0c;完整错误日志&#xff1a; File not found: /Applications/Xcode-beta.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/lib/arc/libarclite_iphoneo…

C语言好题解析(四)

目录 选择题一选择题二选择题三选择题四选择题五编程题一 选择题一 已知函数的原型是&#xff1a; int fun(char b[10], int *a); 设定义&#xff1a; char c[10];int d; &#xff0c;正确的调用语句是&#xff08; &#xff09; A: fun(c,&d); B: fun(c,d); C: fun(&…

Android 9系统源码_SystemUI(十)SystemUIVisibility属性

前言 在Android系统中&#xff0c;很多应用都需要根据具体情况来控制状态栏和导航栏的显示和隐藏&#xff0c;又或者将状态栏透明&#xff0c;实现诸如沉浸式、全面屏灯效果&#xff0c;而要实现这些效果&#xff0c;都离不开SystemUIVisibility属性。由于SystemUIVisibilityy…

jvm 运行时数据区

Java虚拟机定义了若干种程序运行期间会使用到的运行时数据区,其中有一些会随着虚拟机启动而创建,随着虚拟机退出而销毁。另外一些则是与线程一一对应的,这些与线程对应的数据区域会随着线程开始和结束而创建和销毁 1.1程序计数器 程序计数器也叫pc寄存器 可以看作是当前线程…

OLAP 和 OLTP区别

OLAP 和 OLTP 1、概述2、处理数据类型3、处理数据模式4、性能要求5、数据安全性6、应用场景7、结论 1、概述 OLAP在线分析处理&#xff08;Online Analytical Processing&#xff09; 是一种计算机处理数据的方式&#xff0c;主要用于处理企业级的决策分析、战略分析以及业务分…

Java进阶(4)——结合类加载JVM的过程理解创建对象的几种方式:new,反射Class,克隆clone(拷贝),序列化反序列化

目录 引出类什么时候被加载JVM中创建对象几种方式1.new 看到new : new Book()2.反射 Class.forName(“包名.类名”)如何获取Class对象【反射的基础】案例&#xff1a;连接数据库方法 3.克隆&#xff08;拷贝&#xff09;clone浅拷贝深拷贝案例 序列化和反序列化对象流-把对象存…