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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 开复网好文转载—————-跟踪自己一周

    开复网好文转载—————-跟踪自己一周来源:http://www.5xue.com/modules/bbs/viewthread.php?tid=212302自己跟踪自己一周亲爱的,你是如何喂养你的大脑的呢?如果,你不能每天为你的梦

    2022年6月30日
    26
  • 请简要描述在定点DSP处理器上实现浮点运算的基本步骤_74ls161分频器

    请简要描述在定点DSP处理器上实现浮点运算的基本步骤_74ls161分频器 http://bbs.elecfans.com/jishu_486119_1_1.html   7.1  定点数和浮点数概念   如果小数点的位置事先已有约定,不再改变,此类数称为“定点数”。相比之下,如果小数点的位置可变,则称为“浮点数”(定点数的本质是小数,整数只是其表现形式)。 7.1.1  定点数 …

    2025年9月29日
    4
  • window mysql慢日志_windows下如何启用mysql慢查询日志

    window mysql慢日志_windows下如何启用mysql慢查询日志今天在测试4000000条记录的mysql慢查询,数据库安装在windows上,百度了很多,都没有个测试可行的的解决方案或者经验之谈,可能是因为mysql版本不一样吧!这里做个记录以备忘记时候可以查看,也让其他朋友借鉴一下。这里用的mysql版本是5.6.17首先,修改mysql中的my.ini文件,关键代码如下:datadir=”D:/MySQL5.6/MySQLServer5.6/data…

    2022年8月31日
    2
  • matlab读取txt文件指定行_matlab中if判断中返回

    matlab读取txt文件指定行_matlab中if判断中返回MATLAB提供了一系列低层输入输出函数,专门用于文件操作。本文提供了几种Matlab读写文件的方法和预写的脚本。

    2025年9月23日
    5
  • Valid Number

    Valid Number

    2022年1月1日
    43
  • 服务器做矿机使用_文件服务器搭建

    服务器做矿机使用_文件服务器搭建云服务器搭建矿机内容精选换一换在专属主机资源上创建云服务器失败,可能由以下原因造成:您所选择的云服务器规格不在您已有的专属主机支持范围内。各类型专属主机支持的云服务器规格请参见概述。各类型专属主机支持的云服务器规格请参见概述。您的专属主机资源不足,无法创建您所选择的云服务器规格。您可以查看专属主机的剩余vCPU和内存数量是否满足您所选择的云服务器规格。如果资源不足,您弹性云服务器(Elastic…

    2022年9月30日
    4

发表回复

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

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