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)
上一篇 2022年6月8日 上午8:16
下一篇 2022年6月8日 上午8:36


相关推荐

  • 谷歌收购摩托罗拉移动

    谷歌收购摩托罗拉移动明眼人都看得出来 谷歌这是要借助摩托罗拉在手机上的大量专利来震慑某一些竞争对手 警告其不要轻举妄动 起到保护尚在成长当中的 android 系统的目的 谷歌做出这样的举动并不令人吃惊 吃惊的是摩托罗拉做出这样的决策 摩托目前在 android 市场上虽然不是最红火的 但也已经是挺过了最艰难的时刻了 正是收获的季节了 突然这么简单就放手了 确实很有魄力 摩托豪赌 android 系统 当然不希望其这么快被打败

    2026年3月20日
    2
  • idea激活码永久(已测有效)

    idea激活码永久(已测有效),https://javaforall.net/100143.html。详细ieda激活码不妨到全栈程序员必看教程网一起来了解一下吧!

    2022年3月14日
    367
  • expandablelistview详解[通俗易懂]

    expandablelistview详解[通俗易懂]我在项目中使用到expandablelistview,然后我就在网上找了很多关于expandablelistview的文章,那么这里,将一些对去进行总结一些,并将自己踩过的坑填上。expandablelistview就是类似QQ分组,点击分类,显示其各个详细的分类信息。下面是一些效果图这样是完成了有父标题,和子标题,实现了分组,接下来看看如何布局的。

    2022年6月18日
    31
  • kali WEP 激活成功教程

    kali WEP 激活成功教程1 先登录 AP 在 WLAN 配置里将网络认证方式设置为 WEP 将密钥长度设置为 128bit 并将 16 进制值 qwer 设置为 128 位的 WEP 密钥 2 iwconfig 此命令用于检测网卡是否存在 如下图所示

    2026年3月26日
    1
  • 百度离线地图使用_高德地图网页版

    百度离线地图使用_高德地图网页版前言介绍:主要是基于v3.0的API版本进行的离线,纯内网可操作,基本上实现了现有90%以上的功能点,能兼容jpg和png格式的瓦片图层,实现了原生和基于Vue两个版本,实现的功能点概要如下:地图示例:地图展示同时加载两个地图设置地图最大及最小级别移动地图缩放地图拖拽地图设置地图显示范围获取地图显示范围测距地图控件:工具条、比例尺控件地图类型缩略图控件添加版权控件添加自定义控件覆盖物示例:添加/删除覆盖物折线上添加方向箭头添加动画标注点设置点的新图标设

    2025年8月25日
    5
  • php开源桌面会议系统,开源视频会议系统 OpenMeetings「建议收藏」

    php开源桌面会议系统,开源视频会议系统 OpenMeetings「建议收藏」OpenMeetings是一个开源的多语言跨平台可定制视频会议和协作系统,基于ApacheLicense2开源协议。它支持音频、视频,支持共享左面,文件协作处理,它还包含一个白板,通过白板可以导入各种格式的图片。它基于OpenLaszlo的新流媒体格式和开源的Flash服务器Red5(基于Java的开源流媒体服务器)。OpenMeetings视频会议具有如下特点:1、基于P2P技术,服务器压…

    2022年7月12日
    32

发表回复

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

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