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)

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

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

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • 两个向量的夹角公式_向量的夹角公式!急急急!!!「建议收藏」

    两个向量的夹角公式_向量的夹角公式!急急急!!!「建议收藏」展开全部平面向量夹角公式:cos=(ab的内积)/(|a||b|)(1)上部分:a与b的数量积坐标运算:设a=(x1,y1),b=(x2,y2),则a·b=x1x2+y1y2(2)下部分:是32313133353236313431303231363533e58685e5aeb931333431373139a与b的模的乘积:设a=(x1,y1),b=(x2,y2),则(|a||b|)=根号下(x1平…

    2022年10月21日
  • 帮谷歌推广Webp图片格式之:Webp的格式转换

    帮谷歌推广Webp图片格式之:Webp的格式转换

  • jvm的垃圾回收器_java 垃圾回收器

    jvm的垃圾回收器_java 垃圾回收器1.GC分类按线程数:并行垃圾回收器:ParallelCollector.同一时间段内只有一个cpu执行垃圾回收操作.用户线程等待. 串行垃圾回收期:SerialCollector.同一时间段内可以有多个cpu执行垃圾回收操作,用户线程等待.按压缩方式:压缩式,内存有序.非压缩式:内存无序.按工作方式:并发式,及并发GC,用户线程和垃圾回收器同时交替进行. 独占式,垃圾回收线程进行时,用户线程需要等待.按工作区分:年轻代,老年代.2.GC性能指标吞吐量:用户线

  • 怎么制止qq刷屏代码-vbs「建议收藏」

    怎么制止qq刷屏代码-vbs「建议收藏」最近有些人向小编反应QQ刷屏代码没办法关,小编认为有必要发布一下关程序的代码,专门针对上次的QQ刷屏代码:sety=getobject(“winmgmts:\\.\root\cimv2”)setx=y.execquery(“select*fromwin32_processwherename=’wscript.exe'”)foreachiinxi.terminat…

  • 概念模型设计「建议收藏」

    4.1.3     概念模型设计概念模型不依赖于具体的计算机系统,他是纯粹反映信息需求的概念结构。建模是在需求分析结果的基础上展开,常常要对数据进行抽象处理。常用的数据抽象方法是‘聚集’和‘概括’。ER方法是设计概念模型时常用的方法。用设计好的ER图再附以相应的说明书可作为阶段成果

  • 查看linux执行的命令记录_shell 调用history

    查看linux执行的命令记录_shell 调用history前言我们每次敲打linux命令的时候,有时候想用之前用过的命令,一般情况下,我们都会按↑↓箭头来寻找历史的命令记录,那如果我想用1天前执行的某条命令,难道还要按↑100次?显示这样是不现实的,我们可

发表回复

您的电子邮箱地址不会被公开。

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