vue登陆验证

导航守卫:直白的说,导航守卫就是路由跳转过程中的一些钩子函数,这些函数能让你在跳转过程中操作一些其他 的事的时机,这就是导航守卫。  

比如最常见的登录权限验证,当用户满足条件时,才让其进入导航,否则就取消跳转,并跳到登录页面 让其登录。此时可以使用路由导航来实现。
导航守卫有三种:全局的, 单个路由独享的, 组件级的. 

 没有登录时,输入路径进入页面会直接跳转到登录页。
在登录页存值,存登录的个人信息,账号,密码,姓名等信息,用来判断,用户是否已经登录。

// 存个人信息sessionStorage.setItem("name", res.data.nickname);sessionStorage.setItem("phone", res.data.tel);sessionStorage.setItem("pass", res.data.pass);

 在src里面新建文件夹router,router中新建文件index.js

在index.js 写导航守卫。

router.beforeEach((to, from) => {const change=sessionStorage.getItem('phone')// 如果目标路由需要登录且用户没有登录if (!change && to.path!='/') {// 使用 replace 防止登录页进入历史记录return '/'} else {// 如果不需要登录或者用户已经登录,正常访问return true}});

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

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

相关文章

YOLOv11实战宠物狗分类

本文采用YOLOv11作为核心算法框架,结合PyQt5构建用户界面,使用Python3进行开发。YOLOv11以其高效的特征提取能力,在多个图像分类任务中展现出卓越性能。本研究针对5种宠物狗数据集进行训练和优化,该数据集包含丰富的宠物狗图像样本…

星期-时间范围选择器 滑动选择时间 最小粒度 vue3

星期-时间范围选择器 功能介绍属性说明事件说明实现代码使用范例 根据业务需要,实现了一个可选择时间范围的周视图。用户可以通过鼠标拖动来选择时间段,并且可以通过快速选择组件来快速选择特定的时间范围。 如图: 功能介绍 时间范围选择&…

上海ABC行测试面试题回忆版本

11.14号去ABC面试,流程上先做个半个小时的笔试,然后是排队面试。这次做笔试的人很多,有JAVA,大数据,前端,测试,我是最后一批测试。现场没有敢拍照。面试的时候,一共8个面试官&#x…

云岚到家 秒杀抢购

目录 秒杀抢购业务特点 常用技术方案 抢券 抢券界面 进行抢券 我的优惠券列表 活动查询 系统设计 活动查询分析 活动查询界面显示了哪些数据? 面向高并发如何提高活动查询性能? 如何保证缓存一致性? 数据流 Redis数据结构设计 如…

【大数据测试HBase数据库 — 详细教程(含实例与监控调优)】

大数据测试HBase数据库 1. 环境准备与安装1.1 安装 HBase 环境1.1.1 下载与安装 HBase1.1.2 配置 HBase 2. 功能测试2.1 创建表和插入数据2.2 查询数据2.3 更新数据2.4 删除数据2.5 查看表格结构 3. 性能测试3.1 使用 HBase 自带的性能测试工具3.2 使用 YCSB 进行性能测试 4. 容…

JavaWeb常见注解

1.Controller 在 JavaWeb 开发中,Controller是 Spring 框架中的一个注解,主要用于定义控制器类(Controller),是 Spring MVC 模式的核心组件之一。它表示该类是一个 Spring MVC 控制器,用来处理 HTTP 请求并…

vue3+elementplus+虚拟树el-tree-v2+多条件筛选过滤filter-method

筛选条件 <el-inputv-model"searchForm.searchTreeValue"input"searchTreeData"style"flex: 1; margin-right: 0.0694rem"placeholder"请输入要搜索的设备"clearable/><imgclass"refresh-img"src"com_refres…

光伏储能微电网协调控制器

安科瑞 Acrel-Tu1990 1. 产品介绍 ACCU-100微电网协调控制器是一款专为微电网、分布式发电和储能系统设计的智能协调控制设备。该装置能够兼容包括光伏系统、风力发电、储能系统以及充电桩等多种设备的接入。它通过全天候的数据采集与分析&#xff0c;实时监控光伏、风能、储…

【C++课程学习】:继承:默认成员函数

&#x1f381;个人主页&#xff1a;我们的五年 &#x1f50d;系列专栏&#xff1a;C课程学习 &#x1f389;欢迎大家点赞&#x1f44d;评论&#x1f4dd;收藏⭐文章 目录 构造函数 &#x1f369;默认构造函数&#xff08;这里指的是编译器生成的构造函数&#xff09;&#…

React核心概念与特点

React是由Facebook开发并维护的一个用于构建用户界面的开源JavaScript库。它以其独特的组件化架构、高效的性能优化以及灵活的状态管理方式&#xff0c;在前端开发领域占据了重要地位。本文将对React的核心概念、特点以及关键知识点进行全面解析&#xff0c;以帮助读者更好地理…

泷羽sec学习打卡-Linux基础2

声明 学习视频来自B站UP主 泷羽sec,如涉及侵权马上删除文章 笔记的只是方便各位师傅学习知识,以下网站只涉及学习内容,其他的都与本人无关,切莫逾越法律红线,否则后果自负 关于Linux的那些事儿-Base2 一、Linux-Base2linux有哪些目录呢&#xff1f;不同目录下有哪些具体的文件呢…

TCP拥塞控制

TCP拥塞控制&#xff08;Congestion Control&#xff09; 什么是拥塞控制&#xff1f; 拥塞控制(Congestion Control)主要针对整个网络中的数据传输速率进行调节&#xff0c;防止过多的数据注入网络中&#xff0c;这样可以使网络中的路由器或链路不致于过载&#xff0c;以避免…

自闭症机构解析:去机构是否是最好的选择?

在探讨自闭症儿童的教育与康复问题时&#xff0c;一个常被提及的话题是&#xff1a;将孩子送入专业的自闭症干预机构&#xff0c;是否真的是最好的选择&#xff1f;这个问题&#xff0c;对于每一个自闭症家庭而言&#xff0c;都显得尤为沉重且复杂。星贝育园康复中心&#xff0…

Unity教程(十八)战斗系统 攻击逻辑

Unity开发2D类银河恶魔城游戏学习笔记 Unity教程&#xff08;零&#xff09;Unity和VS的使用相关内容 Unity教程&#xff08;一&#xff09;开始学习状态机 Unity教程&#xff08;二&#xff09;角色移动的实现 Unity教程&#xff08;三&#xff09;角色跳跃的实现 Unity教程&…

自动驾驶合集(更新中)

文章目录 车辆模型控制路径规划 车辆模型 车辆模型基础合集 控制 控制合集 路径规划 规划合集

网站架构知识之Ansible进阶(day022)

1.handler触发器 应用场景&#xff1a;一般用于分发配置文件时候&#xff0c;如果配置文件有变化&#xff0c;则重启服务&#xff0c;如果没有变化&#xff0c;则不重启服务 案列01&#xff1a;分发nfs配置文件&#xff0c;若文件发生改变则重启服务 2.when判断 用于给ans运…

整理5个优秀的微信小程序开源项目

​ 一、Bee GitHub: https://github.com/woniudiancang/bee Bee是一个餐饮点餐商城微信小程序&#xff0c;是针对餐饮行业推出的一套完整的餐饮解决方案&#xff0c;实现了用户在线点餐下单、外卖、叫号排队、支付、配送等功能&#xff0c;完美的使餐饮行业更高效便捷&#x…

LeetCode【0029】两数相除

本文目录 1 中文题目2 求解方法&#xff1a;位运算2.1 方法思路2.2 Python代码2.3 复杂度分析 3 题目总结 1 中文题目 给定两个整数&#xff0c;被除数 dividend 和除数 divisor。将两数相除&#xff0c;要求 不使用 乘法、除法和取余运算。 整数除法应该向零截断&#xff0c…

微服务链路追踪skywalking安装

‌SkyWalking是一个开源的分布式追踪系统&#xff0c;主要用于监控和分析微服务架构下的应用性能。‌ 它提供了分布式追踪、服务网格遥测分析、度量聚合和可视化一体化解决方案&#xff0c;特别适用于微服务、云原生架构和基于容器的环境&#xff08;如Docker、K8s、Mesos&…

5G的发展演进

5G发展的驱动力 什么是5G [远程会议&#xff0c;2020年7月10日] 在来自世界各地的政府主管部门、电信制造及运营企业、研究机构约200多名会议代表和专家们的共同见证下&#xff0c;ITU-R WP 5D#35e远程会议宣布3GPP 5G技术&#xff08;含NB-IoT&#xff09;满足IMT-2020 5G技…