react router 路由守卫_React路由鉴权的实现方法「建议收藏」

react router 路由守卫_React路由鉴权的实现方法「建议收藏」前言上一篇文章中有同学提到路由鉴权,由于时间关系没有写,本文将针对这一特性对vue和react做专门说明,希望同学看了以后能够受益匪浅,对你的项目能够有所帮助,本文借鉴了很多大佬的文章篇幅也是比较长的。背景单独项目中是希望根据登录人来看下这个人是不是有权限进入当前页面。虽然服务端做了进行接口的权限,但是每一个路由加载的时候都要去请求这个接口太浪费了。有时候是通过SESSIONID来校验登陆…

大家好,又见面了,我是你们的朋友全栈君。

9d1eb4a43853ecc5ec9bfe00c73fe5da.png

前言

上一篇文章中有同学提到路由鉴权,由于时间关系没有写,本文将针对这一特性对 vue 和 react 做专门说明,希望同学看了以后能够受益匪浅,对你的项目能够有所帮助,本文借鉴了很多大佬的文章篇幅也是比较长的。

背景

单独项目中是希望根据登录人来看下这个人是不是有权限进入当前页面。虽然服务端做了进行接口的权限,但是每一个路由加载的时候都要去请求这个接口太浪费了。有时候是通过SESSIONID来校验登陆权限的。

在正式开始 react 路由鉴权之前我们先看一下vue的路由鉴权是如何工作的:

一、vue之beforeEach路由鉴权

一般我们会相应的把路由表角色菜单配置在后端,当用户未通过页面菜单,直接从地址栏访问非权限范围内的url时,拦截用户访问并重定向到首页。

vue 的初期是可以通过动态路由的方式,按照权限加载对应的路由表 AddRouter ,但是由于权限交叉,导致权限路由表要做判断结合,想想还是挺麻烦的,所以采用的是在 beforeEach 里面直判断用非动态路由的方式

在使用 Vue的时候,框架提供了路由守卫功能,用来在进入某个路有前进行一些校验工作,如果校验失败,就跳转到 404 或者登陆页面,比如 Vue 中的 beforeEnter 函数:

…

router.beforeEach(async(to, from, next)

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/133618.html原文链接:https://javaforall.net

赞 (0)
全栈程序员-站长的头像全栈程序员-站长

相关推荐

  • Java多态实现原理

    Java多态实现原理##前言多态是Java语言重要的特性之一,它允许基类的指针或引用指向派生类的对象,而在具体访问时实现方法的动态绑定。Java对于方法调用动态绑定的实现主要依赖于方法表,但通过引用调用(invokevitual)和接口引用调用(invokeinterface)的实现则有所不同。Java多态实现原理的大致过程:首先是Java编译器将Java源代码编译成class文件。在编译过程中,会根据静态类型将调用的符号引用写到class文件中。在执行时,JVM根据class文件找到调用方法的符号引用,然后在静态类型的方

    2022年7月7日
  • AES加密算法的详细介绍与实现

    AES加密算法的详细介绍与实现AES简介高级加密标准(AES,AdvancedEncryptionStandard)为最常见的对称加密算法(微信小程序加密传输就是用这个加密算法的)。对称加密算法也就是加密和解密用相同的密钥,具体的加密流程如下图:下面简单介绍下各个部分的作用与意义:明文P没有经过加密的数据。密钥K用来加密明文的密码,在对称加密算法中,加密与解密的密钥是相同的。密钥为接收方与发送方协商产生

    2022年6月26日
  • 手机丅f丅lcd什么屏_手机丅f丅lcd什么屏_全球首款屏下相机,90Hz OLED屏+4220mAh「建议收藏」

    手机丅f丅lcd什么屏_手机丅f丅lcd什么屏_全球首款屏下相机,90Hz OLED屏+4220mAh「建议收藏」在传统非全面屏手机时,指纹很好实现,放个传感器在屏幕下方区域就行了,但是全面屏时代,很多手机将指纹改为后置或者侧边指纹,不过后置太难看了,侧边指纹体验不是很好,还是屏幕指纹体验最好,OLED非常轻薄,而且具有一定的光通透性,因此可以实现屏幕指纹,指纹是解决了,但是前置摄像头的放置又是一个问题,刘海屏、水滴屏和挖孔屏都不能形成完美的真全面屏。不过功夫不负有心人,任何再难的技术,只要敢想就能实现,敢做…

    2022年8月10日
  • 51单片机LCD1602程序详解[通俗易懂]

    51单片机LCD1602程序详解[通俗易懂]LCD1602工业字符型液晶。1602是指LCD显示的内容为16X2,即可以显示两行,每行16个字符.特殊接口说明RS:寄存器选择输入端RS=1:指向数据寄存器RS=0:指向指令寄存器RW:读写控制输入端RW=0:写操作RW=1:读操作E:使能信号输入端读操作时,高电平有效;写操作时,下降沿有效;程序编写:#include#inc

    2022年7月16日
  • TCP之深入浅出send和recv

    TCP之深入浅出send和recv

    2021年8月27日
  • sublime text3激活码(注册激活)

    (sublime text3激活码)本文适用于JetBrains家族所有ide,包括IntelliJidea,phpstorm,webstorm,pycharm,datagrip等。IntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,下面是详细链接哦~https://javaforall.net/100143.html…

    2022年3月21日

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号