Nuxt3中的中间件-middleware

news2024/11/18 12:39:49

参考:nuxt3中间件(middleware)详解 - 简书nuxt3中间件(middleware)详解 在项目中有时候需要在网站切换路由的过程中添加一些自定义的逻辑,比如权限什么的。这个时候可以使用nuxt的middleware。 ...https://www.jianshu.com/p/bd22637c6447 

中间件的作用:1. 鉴权2. 路由守卫 

nuxt3中有三种路由中间件

1、匿名(或者叫内联)的中间件:在pages目录下的以文件名自动生成对应路由的功能,就是nuxt3框架内部自动生成一些中间件来实现这一机制的。

如我在index页下面添加了这行代码,我的首页被直接重定向到了test页

<script setup>
definePageMeta({
  middleware: (to) => {
    return navigateTo("/test");
  },
});
</script>

2、命名的路由中间件:放在项目的middleware目录下。 此目录下的命名路由如果在page中使用,那nuxt3框架会自动加载此路由中间件。(注意,路由中间件名称会被统一成kebab-case格式,例如: someMiddleware 会变成 some-middleware)

3、全局的路由中间件: 放在项目根目录中的middleware目录下,并以.global为后缀。这种中间件会在每个路由切换的时候被执行。

// default.global.ts
// 一个简单的路由守卫
export default function defineNuxtRouterMiddleware(to, from) {
  console.log("to:", to);
  console.log("from:", from);
  console.log("要去往的路径:" + to.path);
  console.log("我来的路径:" + from.path);

  if (to.path == "/about") {
    console.log("暂无权限跳转到/about");
    return abortNavigation(); // 停止导航
  }
  if (to.path == "/test") {
    console.log("跳转到 /test 了,3秒后跳回首页");
    setTimeout(() => {
      return navigateTo({ path: "/", query: { id: 111 } });
    }, 3000);
  }
}

中间件可能的返回值说明:

  1. 无返回值:也就是说当前中间件不会阻塞路由跳转。
  2. return navigateTo('/') or return navigateTo({ path: '/' }), 重定向到指定的路径,如何是在服务端的话,会设置 redirect code 为302
  3. return navigateTo('/', { redirectCode: 301 }), 重定向到指定的路径,如果直服务端的话,会设置 redirect code 为301 表示这个重定向的永久的。
  4. return abortNavigation() 终止当前的跳转
  5. return abortNavigation(error) 终止跳转并带有错误信息

 动态添加中间件

 通过addRouteMiddleware() 方法可以在代码中动态添加全局和命名路由中间件。例如在插件中 

export default defineNuxtPlugin(() => {
  addRouteMiddleware(
    "global-test",
    () => {
      console.log(
        "使用addRouteMiddleware()辅助函数添加全局路由中间件 global-test"
      );
    },
    { global: true }
  );

  addRouteMiddleware("named-test", () => {
    console.log(
      "使用addRouteMiddleware()辅助函数添加命名路由中间件 named-test"
    );
  });
});

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

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

相关文章

【算法系列之动态规划】子序列篇

300.最长递增子序列 力扣题目链接 给你一个整数数组 nums &#xff0c;找到其中最长严格递增子序列的长度。 子序列 是由数组派生而来的序列&#xff0c;删除&#xff08;或不删除&#xff09;数组中的元素而不改变其余元素的顺序。例如&#xff0c;[3,6,2,7] 是数组 [0,3,1…

Ubunutu18.04+Qt5.14+Dlib19.24+Opencv3.4.16实时人眼监测实验

文章目录1 前言2 效果3 Ubuntu18.04下Qt、Opencv、Dlib的配置3.0 Ubuntu18.04的安装以及一些基本配置3.1 Qt3.2 Opencv3.3 Dlib4 核心代码4.1 pro文件4.2 Widget.cpp4.3 fatiguedetect.cpp5 资源下载1 前言 在Ubuntu18.04实现的一个人眼监测小程序&#xff0c;使用Qt5.14、Dlib…

仿京东放大镜效果的实现

仿京东放大镜 &#xff08;1&#xff09; 整个案例可以分为三个功能模块 &#xff08;2&#xff09; 鼠标经过小图片盒子&#xff0c; 黄色的遮挡层 和 大图片盒子显示&#xff0c;离开隐藏2个盒子功能 &#xff08;3&#xff09;黄色的遮挡层跟随鼠标功能。 &#xff08;4&…

百度文心一言与Notion的比较(机器人通信的例子)

文心一言出来有一段时间了&#xff0c;也经常会去问问&#xff0c;感觉对于简单的语义理解还是可以&#xff0c;其答案对于一些常见的常识等还是可以给出不错的答案&#xff0c;但是在数学与代码等方面基本上很差&#xff0c;基本的贷款利率、微积分、没有理解语义的代码等都是…

一篇五分生信临床模型预测文章代码复现——Figure 10.机制及肿瘤免疫浸润(一)

之前讲过临床模型预测的专栏,但那只是基础版本,下面我们以自噬相关基因为例子,模仿一篇五分文章,将图和代码复现出来,学会本专栏课程,可以具备发一篇五分左右文章的水平: 本专栏目录如下: Figure 1:差异表达基因及预后基因筛选(图片仅供参考) Figure 2. 生存分析,…

C++篇 ---- 命名空间namespace

由于在c语言中在定义时可能会出现重命名现象&#xff0c;造成空间冲突&#xff0c;c语言中有命名冲突&#xff1a;1 和库冲突。2 互相之间的冲突&#xff0c;变量命名冲突。所以c中就有了对其改进的关键字namespace&#xff0c;针对重定义&#xff0c;解决空间冲突。 文章目录命…

总结820

学习目标&#xff1a; 4月&#xff08;复习完高数18讲内容&#xff0c;背诵21篇短文&#xff0c;熟词僻义300词基础词&#xff09; 学习内容&#xff1a; 高等数学&#xff1a;巩固所学&#xff0c;1~10讲内容回顾 rule No.1:never lost your knowledge. rule No.2:never f…

C++基础语法(模板)

C的模板是什么&#xff1f;有什么用&#xff1f;如果你想知道问题的答案&#xff0c;那么看这篇博客就对了&#xff0c;在这篇博客中&#xff0c;我们将探讨泛型编程&#xff0c;C模板的具体内容 目录 模板概念 函数模板 显示实例化与隐式实例化 模板不支持声明和定义分离 类模…

104.(cesium篇)cesium卫星轨道模拟

听老人家说:多看美女会长寿 地图之家总目录(订阅之前建议先查看该博客) 文章末尾处提供保证可运行完整代码包,运行如有问题,可“私信”博主。 效果如下所示: 下面献上完整代码,代码重要位置会做相应解释 <html lang="en"> <

【数据结构】带你细致理解八大排序

文章目录前言一.冒泡排序前一个数跟后一个数比较后一个数跟前一个数比较优化复杂度与稳定性二.插入排序初始化条件从第一个元素开始初始化条件从第二个元素开始复杂度与稳定性三.选择排序一趟选出一个最小的一趟选出一个最大的和一个最小的复杂度与稳定性四.堆排序建堆用向下调…

数据结构入门(C语言版)栈和队列之栈的介绍及实现

栈栈的概念栈的实现过程栈的结构体与接口的定义1、静态栈结构2、动态栈结构3、栈的接口定义栈的接口实现①初始化栈(StackInit)②入栈(StackPush)③出栈(StackPop)④栈顶(StackTop)⑤栈元素个数(StackSize)⑥检测栈是否为空(StackEmpty)⑦销毁栈(StackDestroy)结语栈的概念 栈…

【EXata】在 Visual Studio 2010 上编译与调试 EXata

一、在 VS2010 中编译 Exata 通过命令行的形式来编译调试 EXata 的方式太过麻烦&#xff0c;一次两次还好&#xff0c;时间长了慢慢就烦了&#xff0c;于是想着有没有什么方法能够简化这些操作&#xff0c;翻看手册&#xff0c;发现是可以在 IDE 中进行编译&#xff0c;于是就有…

mysql分库分表分片分区及常见问题

1.前言 MySQL单库数据量在5000万以内性能比较好&#xff0c;超过阈值后性能会随着数据量的增大而变弱。MySQL单表的数据量是500w-1000w之间性能比较好&#xff0c;超过1000w性能也会下降。 2.mysql分布式 分库 分库一般有两种目的&#xff1a;将库中不同表进行拆分&#xff…

英国访问学者T5签证所需相关材料

英国访问学者T5签证所需相关材料,下面就随知识人网小编一起来看一看。 1、完整填写的申请表格并亲笔签名。 2、近期护照规格白色背景彩色照片并贴在签证表格首页右上角。 3、签证后至少剩余6个月有效期的护照及申请人所持有的旧护照。 4、邀请信原件。 邀请信主要内容包括&…

基于SSM框架便利店管理系统(进销存管理系统)(java+spring+springmvc+mybatis+maven+mysql+html)

一、项目简介 本项目是一套基于SSM框架便利店管理系统(进销存管理系统)&#xff0c;主要针对计算机相关专业的正在做毕设的学生与需要项目实战练习的Java学习者。 包含&#xff1a;项目源码、项目文档、数据库脚本、软件工具等&#xff0c;该项目附带全部源码可作为毕设使用。…

BT8918D---huart模块分析

1 huart模块 huart模块从名字可以看出&#xff0c;用于串口UART通讯&#xff0c;H的含义&#xff0c;目前还不知道&#xff0c;待了解。该模块源码未公开&#xff0c;已经编译成库文件&#xff0c;供开发者使用。 2 huart模块分析 2.1 特性 默认特性&#xff1a; Baud rat…

R语言处理数据——janitor包的介绍及使用

janitor功能介绍 janitor可以检查并清理脏数据&#xff0c;适用于R语言用户。主要功能如下&#xff1a; 1、完美格式化数据框的列名&#xff1b; 2、创建并格式化1-3个变量的频率表&#xff0c;可以看作是一个改进的table()函数&#xff1b; 3、提供用于清理和检查数据框的其他…

CCS通过dat文件导入数据计算出结果再导出数据

之前有很多博主讲过在matlab当中导出数据&#xff0c;到DSP里面进行计算&#xff0c;然后再将数据导出到matlab当中进行使用。 以前使用过matlab当中的dat数据&#xff0c;大家可以看一下区别&#xff1a; fid fopen(A.dat,wt);%将所得的数据存在A.dat当中 fprintf(fid,%g\n…

Hadoop配置

静态IP vi /etc/sysconfig/network-scripts/ifcfg-ens33 BOOTPROTOstatic ONBOOTyes IPADDR192.168.10.11 NETMASK255.255.255.0 GATEWAY192.168.138.2 DNS1114.114.114.114 DNS28.8.8.8 重启网络服务 service network restart 修改主机名 hostnamectl set-hostname ‘hadoop…

【Vue】学习笔记03-数据绑定

学习笔记03-数据绑定v-bind 单向绑定v-model 双向绑定错误案例&#xff1a;简写总结v-bind 单向绑定 <!--准备好一个容器--><div id"root">单向数据绑定&#xff1a;<input type"text" v-bind:value"name"></div><…