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


相关推荐

  • 安卓10修改系统ntp服务器,安卓修改ntp服务器地址

    安卓10修改系统ntp服务器,安卓修改ntp服务器地址安卓修改ntp服务器地址内容精选换一换访问IIS搭建的网站不通,报错404。IIS上绑定的域名只填写了主机名,没有指定IP地址。本节操作指导用户修改IIS上绑定的域名,以WindowsServer2008R2操作系统云服务器为例。登录服务器,选择“开始>管理工具>信息服务(IIS)管理器。”在IIS管理器界面,选择自己需要编辑的网站。选择待修改的网站,单击右键选择华为云帮…

    2022年6月11日
    50
  • uva 11324 The Largest Clique(图论-tarjan,动态规划)

    uva 11324 The Largest Clique(图论-tarjan,动态规划)

    2022年1月13日
    43
  • clickhouse 正则_socket获取本机ip地址

    clickhouse 正则_socket获取本机ip地址去掉内网的SQL查询SELECTdate,ts,domain,count(1)astotalFROMdb.tbWHEREdate=today()AND(replaceRegexpAll(_pingip,’^(127\\.0\\.0\\.1)|(localhost)|(10\\.\\d{1,3}\\.\\d{1,3}\\.\\d{1,3})|(172\\.((1[6-…

    2022年9月14日
    3
  • 用java打印空心菱形_java打印空心直角三角形

    用java打印空心菱形_java打印空心直角三角形打印菱形尤其是空心菱形对于初学者来说有一定难度,熟练掌握了for循环后,还是可以打印出来的分析:1.先打印上半部分,再打印下半部分      2.找准空格与星号之间的关系,然后再打印      3.上半部分每一行数目分别为1、3、5、7、9、7、5、3、1      4.找准关系2*i-1     //练习二:打印菱形与空心菱…

    2022年9月29日
    2
  • spring注解@Conditional 按照一定的条件进行判断,满足条件给容器中注册bean

    spring注解@Conditional 按照一定的条件进行判断,满足条件给容器中注册beanpublicclassPerson{ privateStringname; privateintage; publicStringgetName(){ returnname; } publicvoidsetName(Stringname){ this.name=name; } publicintgetAge(){…

    2025年7月30日
    1
  • RCEP是什么协议_常用的隧道协议有哪些

    RCEP是什么协议_常用的隧道协议有哪些本发明涉及通信技术领域,特别是涉及一种对同一隧道下主LSP和HotLSP的识别方法、PCEP协议及计算机存储介质。背景技术:随着软件定义网络(SoftwareDefinedNetwork,SDN)技术的发展,路径计算单元(PathComputationElement,PCE)不仅仅是作为集中算路的服务组件,还可以主动的对已经建立的隧道进行动态规划和调优工作。draft-ietf-pce-…

    2025年9月30日
    3

发表回复

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

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