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


相关推荐

  • javascript全局变量失效

    javascript全局变量失效问题:我在js文件中定义了一个全局变量:vara,在函数B()中给a赋值,然后在函数C()中访问a结果发现a居然是undefined找原因:查了不少资料感觉和我的情况都不同,仔细分析了一下,发现了一些端倪:我的操作是这样的,我在A页面中加了iframe,iframe的地址是B,我在A页面中调用了B()函数,然后又在B页面中调用了C()函数。问题就出在这了,javascript的全…

    2022年6月13日
    82
  • 前端面试ajax考点汇总_javascript常见面试题

    前端面试ajax考点汇总_javascript常见面试题前端面试题总结(四)ajax篇1、什么是AJAX,为什么要使用Ajax(请谈一下你对Ajax的认识)什么是ajax:AJAX是“AsynchronousJavaScriptandXML”的缩写。他是指一种创建交互式网页应用的网页开发技术。Ajax包含下列技术:基于web标准(standards-basedpresentation)XH…

    2022年8月29日
    3
  • for循环break,continue「建议收藏」

    for循环break,continue「建议收藏」for循环break,continue

    2022年4月20日
    36
  • 并发编程之深入理解ReentrantLock和AQS原理

    并发编程之深入理解ReentrantLock和AQS原理

    2021年8月3日
    48
  • C++ 获取窗口句柄

    C++ 获取窗口句柄1、使用FindWindow函数获取窗口句柄示例:使用FindWindow函数获取窗口句柄,然后获得窗口大小和标题,并且移动窗口到指定位置。[html] viewplaincopy#include Windows.h>  #include stdio.h>  #include string.h>  #include iostre

    2022年7月14日
    17
  • Using ZipLib to create a Zip File in C#

    Using ZipLib to create a Zip File in C#System.IO.Compression是.Net2.0里与压缩有关的命名空间,但是使用起来并不是很方便。使用第3方库ziplib可以很方便地进行压缩类的操作。从[1]下载动态库,然后在工程里AddReference,把ICSharpCode.SharpZipLib.dll加进去。在代码来创建一个zip包的例子如下(摘自ziplibsamplecode)…

    2022年7月26日
    8

发表回复

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

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