10行代码实现vue路由最简单的登陆拦截

需求:不涉及任何角色权限,基本实现目标,有token就可查看任何页面,否则就去登陆,来一步步实现

1. 创建你的路由页面,此处略了

2. 导航守卫拦截判断思路

// 创建路由
const router = createRouter({
  history: createWebHistory(),
  routes: [],
})
// 开始拦截,如果是登陆页,就放行,放行后进入下一个页面
router.beforeEach((to, _, next) => {
 ....
})

2.1 判断当前是不是登陆页面,如果是,那么点击登陆后,就放行,即调用next(),进入下一个页面

// 开始拦截,如果是登陆页,就放行,放行后进入下一个页面
router.beforeEach((to, _, next) => {
 if (to.path === '/login') {
    next()
  }
  // 这里这么写,只是为了演示能进入下一个页面,如果不写这个,
  // 你点击跳转了,路由的to.path 已经变为其它的路径了,
  // 你是看不到下个页面的
  next()
})

2.1.1 演示1,如果不写第二个next(),你会看到这个演示

可以看到 点击后,[to.path] 变成了/home, 所以判断不再走 if 了,为了能看到后边的页面,你需要next()
请添加图片描述

2.1.2 演示2,加入第二个next(),你会看到这个演示

请添加图片描述

2.2 如果不是登录页,思路就是 判断有木有 登陆过,即有木有token,如果登陆过,就放行,即next(),可以查看任何页面,如果没有登陆过,就跳转到登录页

  • 不需要登陆,就可以看到的页面就不说了,你创建个白名单数组判断下就可以了,直接放行,这里不做演示

登陆跳转

// 点击登陆... 代码省略
// 拿到token,存起来
localStorage.setItem('token', 'token')
// 接着跳转到下个路径
router.push('/home')

守卫的代码就是,判断不是登陆页的时候,如果有token,放行,没有的话,跳转回登陆页

router.beforeEach((to, _, next) => {
  // 获取token
  const token = localStorage.getItem('token')
  if (to.path === '/login') {
    next()
  } else {
    // 判断有木有token
    token && next()
    next('/login')
  }
})

2.2.1 演示1- 有token, 页面随便进,如果清了token, 刷新页面,就跳转回 登录页

请添加图片描述

这里有个不好的体验,登陆成功了,还可以回退回去,当然你可以 通过 跳转时用replace 方法解决,虽然解决了,但是,想要的效果应该是:你回退到了登录页,如果登陆过了,就直接回到上个页面,而不是通过不把路由存入到路由栈的思路

2.2.2 演示2- 登陆成功了,用户还可以通过浏览器的回退按钮,返回到登陆页

请添加图片描述

2.3 解决上述问题

  • 跳转还是通过 push 方法去跳转
    只需要加个判断,即你不让它跳就行了, 即 next(false),也就是说,如果有token,就调用 next(false)
router.beforeEach((to, _, next) => {
  // 获取token
  const token = localStorage.getItem('token')
  if (to.path === '/login') {
    token && next(false)
    next()
  } else {
    // 判断有木有token
    token && next()
    next('/login')
  }
})

2.3.1 演示登陆过了不能再跳转到 登陆页

  • 这里退出的回调里,一定要清除token , 否则你跳转不回到登录页的,因为判读了有token, 就 next(false)了
    请添加图片描述

2.3.2 虽然解决了问题,但是新的bug又来了,如果你改变地址栏为login, 你会发现是空白,这是因为next(false),拦截了渲染

请添加图片描述

2.3.3 解决以上这个bug, 强制跳转回一个固定路径,确切的说,自己输入了地址栏路径,等于是强制刷新了,所以路径肯定是 ‘/’ [根据你自己定义路由的规则判断哦]

router.beforeEach((to, from, next) => {
  // 获取token
  const token = localStorage.getItem('token')
  if (to.path === '/login') {
    token && next(from.fullPath || '/')
    next()
  } else {
    // 判断有木有token
    token && next()
    next('/login')
  }
})

这样就解决了,最终效果演示

请添加图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

深度学习手势识别算法实现 - opencv python 计算机竞赛

文章目录 1 前言2 项目背景3 任务描述4 环境搭配5 项目实现5.1 准备数据5.2 构建网络5.3 开始训练5.4 模型评估 6 识别效果7 最后 1 前言 🔥 优质竞赛项目系列,今天要分享的是 🚩 深度学习手势识别算法实现 - opencv python 该项目较为新颖…

智能优化算法应用:基于狮群算法无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用:基于狮群算法无线传感器网络(WSN)覆盖优化 - 附代码 文章目录 智能优化算法应用:基于狮群算法无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.狮群算法4.实验参数设定5.算法结果6.参考文献7.MATLAB…

rman 0级 1级备份结合的注意事项 obsolete 和 FRA自动清理

1. 当心0级备份从controlfile中删除,0级备份决定recover windows时间 ,一级不算 Incremental backup cycle: Sundays: Level 0 Monday-Sat: cumulative level 1 Every Friday and Saturday, the time for the incremental level 1 backup sud…

创投课程研报专题课 | 如何写出高质量研报

协会邀请了来自GPTDAO的分析师——Will作为VC创投课程研报专题课的嘉宾,将于北京时间12月2日(周六)晚上21:00 PM-22:00 PM,与所有对Web3投资、创业心怀热忱的朋友一同探讨《如何写出高质量的研报》这个激动人心的话题。 浙江大学学生区块链协会&#xff…

mybatis整合(手动添加jar包方式)

操作步骤 创建数据库 建立user表 放入数据 1、创建javaweb工程并添加Jar包 用到的jar包 junit 用于测试 mybatis框架&#xff1a;mybatis-3.5.9.jar mysql数据库&#xff1a;mysql-connector-java-8.0.28.jar 2、添加MyBatis核心配置文件 <?xml version"1.0"…

[原创][2]探究C#多线程开发细节-“线程的无顺序性“

[简介] 常用网名: 猪头三 出生日期: 1981.XX.XX QQ: 643439947 个人网站: 80x86汇编小站 https://www.x86asm.org 编程生涯: 2001年~至今[共22年] 职业生涯: 20年 开发语言: C/C、80x86ASM、PHP、Perl、Objective-C、Object Pascal、C#、Python 开发工具: Visual Studio、Delph…

TensorRT之LeNet5部署(onnx方式)

文章目录 前言LeNet-5部署1.ONNX文件导出2.TensorRT构建阶段(TensorRT模型文件)&#x1f9c1;创建Builder&#x1f367;创建Network&#x1f36d;使用onnxparser构建网络&#x1f36c;优化网络&#x1f361;序列化模型&#x1f369;释放资源 3.TensorRT运行时阶段(推理)&#x…

工业机器视觉megauging(向光有光)使用说明书(二,轻量级的visionpro)

测试程序暂时支持80万&#xff08;包含1024*768&#xff09;以上的gige工业相机&#xff0c;以后会支持640*480分辨率相机。 我们程序中使用注意力机制&#xff0c;其实就是感兴趣区域&#xff08;roi&#xff0c;你看过我前面博文&#xff0c;就应该明白&#xff09;精神的延…

mac截图Snagit 中文介绍

1.超越普通的屏幕截图 TechSmith Snagit 是唯一具有内置高级图像编辑和屏幕录制功能的屏幕捕获软件。因此&#xff0c;您可以在一个程序中轻松创建高质量的图像和视频。 2.最后&#xff0c;屏幕捕获软件可以完成您所做的一切 快速解释一个过程如果您正在努力清楚地沟通&…

JS前端逆向

前言 js逆向一直没有相关了解&#xff0c;虽然目前渗透遇见的不是很多&#xff0c;大多数遇见的要么不加密&#xff0c;要么无法实现其加密流程&#xff0c;不过最近看到了一个较为简单的站点正好能够逆向出来&#xff0c;就做了简单记录。本文旨在介绍js逆向的一些基础思路&am…

WebGL笔记:矩阵旋转运算的原理和实现

矩阵 矩阵&#xff08;Matrix&#xff09;是一个按照矩形纵横排列的复数集合 矩阵就像一个矩形的阵盘&#xff0c;通过其中纵横排列的元素我们可以摆出不同功能的阵法&#xff0c;比如位移矩阵、旋转矩阵、缩放矩阵 …在矩阵中的每一行&#xff0c;或者每一列数字构成的集合&a…

设计模式-结构型模式之代理设计模式

文章目录 八、代理设计模式 八、代理设计模式 代理设计模式通过代理控制对象的访问&#xff0c;可以详细访问某个对象的方法&#xff0c;在这个方法调用处理&#xff0c;或调用后处理。既(AOP微实现) 。 代理有分静态代理和动态代理&#xff1a; 静态代理&#xff1a;在程序…

POSTGRESQL中如何利用SQL语句快速的进行同环比?

1. 引言 在数据驱动的时代&#xff0c;了解销售、收入或任何业务指标的同比和环比情况对企业决策至关重要。本文将深入介绍如何利用 PostgreSQL 和 SQL 语句快速、准确地进行这两种重要分析。 2. 数据准备 为了演示&#xff0c;假设我们有一张 sales 表&#xff0c;存储了销…

微信订阅号和服务号的区别

服务号和订阅号有什么区别&#xff1f;服务号转为订阅号有哪些作用&#xff1f;我们都知道&#xff0c;服务号一个月只能发4次文章&#xff0c;但是订阅号每天都能发文章。不过在接收消息这一方面&#xff0c;服务号群发的消息有消息提醒&#xff0c;并显示在对话框&#xff1b…

重新认识Word——样式

重新认识Word Word样式给所有一级标题加上一级标题样式修改标题一样式&#xff0c;符合要求 正文样式标题前的小黑点导航窗格样式的相互复制Word一键转PPT 话说回来&#xff0c;一个程序员平时可能还看不起office全家桶的软件&#xff0c;但是&#xff0c;在实际的生活运用中&a…

音视频的功耗优化

前言 在应用中&#xff0c;录制与音视频模块往往是高耗能的模块&#xff0c;设备容易发热&#xff0c;影响体验。 什么是功耗优化 手机有多个耗电模块&#xff0c; SOC(CPU&#xff0c;GPU&#xff0c;DDR)&#xff0c;Display&#xff0c;Audio&#xff0c;Video&#xff0…

thinkphp 5.1 对数据库查出来的字段进行预处理

比如数据库的设计是下面这样子&#xff1a; 我想展示的是这个样子&#xff1a; 前端可以处理。 Think PHP的处理方式&#xff1a; 定义属性 &#xff1a; $this->customize 任意值;//这里的之没有作用 <?phpnamespace app\hs\controller\shop;use app\daogou\mo…

Windows用户相关Dos命令演示

Windows用户相关Dos命令演示 1、查看当前用户 命令&#xff1a;whoami 2、查看主机名 命令: hostname 3、查看所有用户 命令&#xff1a;net user 4、查看指定的用户 命令&#xff1a;net user 用户名 5、添加用户 命令&#xff1a;net user 用户名 密码 /add 注…

数据链路层之VLAN基本概念和基本原理

学习的最大理由是想摆脱平庸&#xff0c;早一天就多一份人生的精彩&#xff1b;迟一天就多一天平庸的困扰。各位小伙伴&#xff0c;如果您&#xff1a; 想系统/深入学习某技术知识点… 一个人摸索学习很难坚持&#xff0c;想组团高效学习… 想写博客但无从下手&#xff0c;急需…

ASP.NET Core MVC过滤器

1、过滤器分为授权过滤、资源访问过滤、操作方法&#xff08;Action&#xff09;过滤、结果过滤、异常过滤、终结点过滤。上一次咱们没有说异常过滤和终结点过滤&#xff0c;不过老周后面会说的。对这些过滤器&#xff0c;你有印象就行了。 2、所有过滤器接口都有同步版本和异…