Vite + Vue3 + TS项目配置前置路由守卫

        在现代前端开发中,使用 Vue 3 TypeScript 的组合是一种流行且高效的开发方式。Vite 是一个极速的构建工具,可以显著提升开发体验。本文博主将指导你如何在 Vite + Vue 3 + TypeScript 项目中配置前置路由守卫(Navigation Guards)。

前置条件

在开始配置项目前置路由守卫前,博主希望你能够先达成以下前置条件:

1.完成Vue3前端项目搭建: Vite 创建 Vue3 + TS 项目

2.引入Vue-Router模块:Vue3项目配置Vue-Router

3.完成Pinia配置:Vue项目安装Pinia

1.创建前置守卫

        在之前的章节中,我们已经完成了路由视图和路由重定向的配置,现在我们只需要为我们的路由器实例对象添加一个导航守卫就可以控制是否放行路由跳转啦。

        我们可以通过 router.beforeEach 注册一个全局前置守卫,当一个导航触发时,全局前置守卫按照创建顺序调用。

        守卫是异步解析执行的,导航在所有守卫 resolve 完之前一直处于等待中

// 路由配置文件 index.tsimport { createWebHistory, createRouter } from 'vue-router'// 定义路由配置
const routes: Array<any> = [{path: '/',redirect: '/home'},{path: '/login',name: 'Login',component: () => import('/@/views/login/index.vue')},{path: '/home',name: 'Home',component: () => import('/@/views/home/index.vue'),}
]// 创建路由实例
const router = createRouter({history: createWebHistory(),    // 导航历史记录模式routes
})// 导航守卫
router.beforeEach((to, from) => {// 返回 false 以取消导航return false
})// 导出实例
export default router

每个路由守卫都可以有以下三个参数:

  • to:即将要进入的目标;
  • from:当前导航正要离开的路由;
  • next:当你在使用next时,确保 next 在任何给定的导航守卫中都被严格调用一次。它可以出现多于一次,但是只能在所有的逻辑路径都不重叠的情况下,否则钩子永远都不会被解析或报错。

 2.配置无token跳转登录页

        既然知道了 Vue-Router 导航守卫的工作机制,那么我们现在可以尝试一下结合 Pinia 进行路由控制了:

        2.1.配置User状态

        在 src/store/ 目录下,新建 userInfo.ts 文件,用于存储 User/token 等状态:

// userInfo.tsimport { defineStore } from 'pinia'
import { reactive } from 'vue'interface UserInfo {token: string,userId: string,userName: string,roles: Array<string>
}export const useUserInfoStore = defineStore('userInfo', () => {const state = reactive({userInfo: {} as UserInfo})const setUserInfo = (userInfo: UserInfo) => {state.userInfo = userInfo}const getUserInfo = () => {return state.userInfo}return { state, setUserInfo, getUserInfo }
})

        2.2.配置前置路由守卫

        在 router.beforeEach 中根据token配置路由跳转:

// index.ts 路由配置文件import { createWebHistory, createRouter } from 'vue-router'
// 引入我们刚才写好的 Pinia 状态
import { useUserInfoStore } from '/@/store/userInfo'// 定义路由配置
const routes: Array<any> = [{path: '/',redirect: '/home'},{path: '/login',name: 'Login',component: () => import('/@/views/login/index.vue')},{path: '/home',name: 'Home',component: () => import('/@/views/home/index.vue'),}
]// 创建路由实例
const router = createRouter({history: createWebHistory(),    // 导航历史记录模式routes
})// 导航守卫
router.beforeEach((to, from, next) => { const userInfoStore = useUserInfoStore()if ((to.path === '/login') && (!userInfoStore.state.userInfo.token)) {next()} else {if (userInfoStore.state.userInfo.token) {next()} else {next('/login')}}})// 导出实例
export default router

3.效果测试

        项目根路径下(与src目录同级),运行命令行:

# 启动项目
$ npm run dev

        可见,现在我们的pinia中没有存储的有token,所以在项目启动时,被全局前置守卫拦截下来,跳转到登录路由。

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

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

相关文章

【YashanDB知识库】如何远程连接、使用YashanDB?

问题现象 在各个项目实施中&#xff0c;我们经常遇到客户、开发人员需要连接和使用YashanDB但不知如何操作的问题&#xff0c;本文旨在介绍远程连接、使用YashanDB的几种方式。 问题的风险及影响 无风险 问题影响的版本 历史版本~23.2 问题发生原因 无 解决方法及规避方…

前端web开发HTML+CSS3+移动web(0基础,超详细)——第1天

一、开发坏境的准备 1&#xff0c;在微软商店下载并安装VS Code 以及谷歌浏览器或者其他浏览器&#xff08;我这里使用的是Microsoft Edge&#xff09; 2&#xff0c;打开vs code &#xff0c;在电脑桌面新建一个文件夹命名为code&#xff0c;将文件夹拖拽到vs code 中的右边…

Windows10安装CMake图文教程

CMake是一个跨平台的开源构建工具&#xff0c;用于管理软件构建过程。CMake允许开发人员使用简单的语法来描述项目的构建过程&#xff0c;而无需直接处理特定于操作系统或编译器的细节。开发人员可以编写CMakeLists.txt文件来指定项目的源文件、依赖项和构建规则&#xff0c;然…

Ubuntu 20.04.6 安装 Elasticsearch

1.准备 -- 系统更新 sudo apt update sudo apt upgrade -- 安装vim 文本编辑器 sudo apt install vim-- jdk 版本确认 java -versionjdk 安装可以参照&#xff1a;https://blog.csdn.net/CsethCRM/article/details/140768670 2.官方下载Elasticsearch 官方地址&#xff1a;h…

Tekion 选择 ClickHouse Cloud 提升应用性能和指标监控

本文字数&#xff1a;4187&#xff1b;估计阅读时间&#xff1a;11 分钟 作者&#xff1a;ClickHouse team 本文在公众号【ClickHouseInc】首发 Tekion 由前 Tesla CIO Jay Vijayan 于 2016 年创立&#xff0c;利用大数据、人工智能和物联网等技术&#xff0c;为其汽车客户解决…

2024电赛H题参考方案(+视频演示)——自动行使小车

目录 一、题目要求 二、参考资源获取 三、参考方案 1、环境搭建及工程移植 2、移植MPU6050模块 3、移植TB6612电机驱动模块 4、整体控制方案视频演示 总结 一、题目要求 小编自认为&#xff1a;此次H题属于控制类题目&#xff0c;相较于往年较为简单&#xff0c;功能也算单一&a…

谷歌出品,一款免费的智能绘图工具

AutoDraw是由Google开发的一款基于网络的智能绘图工具&#xff0c;旨在通过人工智能技术帮助用户快速、简便地创建图画和图表。该工具于2017年4月11日由谷歌创意实验室推出&#xff0c;并迅速获得了广泛关注。 AutoDraw的核心功能是利用机器学习算法识别用户的草图或涂鸦&…

分布式SQL查询引擎之Presto

Apache Presto 是一个开源的分布式 SQL 查询引擎&#xff0c;旨在高效地对大规模数据集执行交互式查询。Presto 最初由 Facebook 开发&#xff0c;现已成为广泛使用的数据查询工具&#xff0c;特别是在大数据和分析领域。 主要特点 高性能&#xff1a;Presto 通过并行化和内存…

【A1web 1.0】靶机复现详解!

靶机地址&#xff1a; https://www.vulnhub.com/entry/ai-web-1,353/攻击机&#xff1a;kali 首先虚拟机建一个A1web 1.0靶机 切换nat模式 然后kali扫描 nmap -sV ip段 0/24 扫描出ip进行访问 访问没有什么信息 使用dirb 对网页…

使用 Matlab 绘制带有纹理的柱状图

以下是效果 1. 在 Matlab 里安装两个额外的库&#xff1a; hatchfill2 和 legendflex。 &#xff08;1&#xff09;搜索并安装 hatchfill2&#xff0c;用来画纹理 (2) 搜索并安装 legendflex&#xff0c;用来画自定义的图例 2. 代码&#xff08;说明见注释&#xff09; data …

排序算法辨析(快速记忆版)(冒泡排序,选择排序,插入排序,希尔排序,归并排序,快速排序)保研面经

选择排序&#xff1a;摸到一叠牌&#xff0c;每次选择出最小的放在合适的位置&#xff08;第一次放在第一张&#xff0c;第二次放在第二张&#xff09;&#xff0c;实现排序 最好最坏都是 O&#xff08;n^2&#xff09; 插入排序&#xff1a;摸牌的时候一张一张摸&#xff0c;每…

每日Attention学习14——Efficient Self-Attention

模块出处 [MICCAI 22] [link] [code] Lesion-aware Dynamic Kernel for Polyp Segmentation 模块名称 Efficient Self-Attention (ESA) 模块作用 高效自注意力 模块结构 模块思想 Self Attention操作在具有优秀的长距离建模能力的同时&#xff0c;也有着较高的计算与内存成…

学习ruixingkafei过程

一、抓包 手机安装证书&#xff0c;开启VPN抓包&#xff0c;电脑上打开花瓶&#xff0c;在同一个局域网内抓包&#xff0c;这些老一套没什么可说的。 看看我们的抓包结果是不是很美丽&#xff0c;请求内容加密&#xff0c;返回内容也加密&#xff0c;猜测加密方式aes&#xff0…

JWT (JSON Web Token)

&#x1f3bc;个人主页&#xff1a;金灰 &#x1f60e;作者简介:一名简单的大一学生;易编橙终身成长社群的嘉宾.✨ 专注网络空间安全服务,期待与您的交流分享~ 感谢您的点赞、关注、评论、收藏、是对我最大的认可和支持&#xff01;❤️ &#x1f34a;易编橙终身成长社群&#…

AI绘画3分钟解决英文恐惧症,comfyui汉化插件

前言 全面解析&#xff1a;Comfy UI汉化插件的安装与配置指南 本文涉及的工作流和插件&#xff0c;需要的朋友请扫描免费获取哦 引言 本文图片来源网络&#xff0c;侵权联删除。 在全球化的今天&#xff0c;软件界面的本地化是提升用户体验的重要一环。对于许多非英语母语的…

EasyExcel入门

目录 一、文章简介 二、概念 1.EasyExcel是什么&#xff1f; 2.EasyExcel 能用在哪里&#xff1f; 3.为什么要选用EasyExcel解析excel&#xff1f; 4.如何使用EasyExcel&#xff1f; 三、EasyExcel快速入门 1.环境搭建 2.简单写excel 代码示例 TestFileUtil Employe…

心灵调整:音乐之美

音乐每天都在不同的空间和复杂的形式影响着人们。从电梯音乐削减尴尬的沉默,到家庭交通堵塞。音乐增强了人们所爱的人与人之间的瞬间,并帮助他们度过艰难时期。音乐被用于世界各地几代人的各种形式的治疗。本文进一步阐述了它如何在几种类型的心理健康状况中得到应用。 什么是音…

【SOC 芯片设计 DFT 学习专栏 -- DFT DRC规则检查】

请阅读【嵌入式及芯片开发学必备专栏】 请阅读【芯片设计 DFT 学习系列 】 如有侵权&#xff0c;请联系删除 转自&#xff1a; 芯爵ChipLord 2024年07月10日 12:00 浙江 文章目录 概述DRC的概念Tessent DRC检查的概述时钟相关检查扫描相关检查BIST规则检查预DFT时钟规则检查 …

SQL优化(一)基础概念

基数&#xff08;cardinality&#xff09; 表中某个列的唯一键的数量叫做基数&#xff0c;主键列的基数就是表中数据的总行数。 可以用select count(distinct 列名) from 表名来计算基数。 基数的高低影像列的数据分布。 例如&#xff1a;先用Scott账户创建一个测试表test …

设计模式15-门面模式

设计模式15-门面模式 "接口隔离"模式典型模式1. 适配器模式&#xff08;Adapter Pattern&#xff09;2. 装饰模式&#xff08;Decorator Pattern&#xff09;3. 桥接模式&#xff08;Bridge Pattern&#xff09;4. 代理模式&#xff08;Proxy Pattern&#xff09;5. …