react router v6路由守卫权限控制

文章目录

react router v6路由守卫权限控制前言一、个人需求二、实现思路1.路由守卫是什么2.react router与vue router比较2-1.参考vue router2-2. 参考react router v6

3. 实现思路3-1. react router v6 对应Route 的API方法3-2. 原始 react router3-3. 改造 react router3-4 Guard函数

总结

前言

好久没更新文章了，主要是最近都在学react,今天更新这篇文章主要是记录一下之前vue学的内容怎么用到react中。大家都知道在react router v6中没有路由守卫这个概念，因此页面级的权限，不能在进入页面后进行判断，所以还是需要用到vue router中的路由守卫这个概念

提示：以下是本篇文章正文内容，下面案例可供参考

一、个人需求

需要根据不同的权限对路由进行权限控制

二、实现思路

1.路由守卫是什么

官方解释

导航守卫主要用来通过跳转或取消的方式守卫导航

我是这么理解的：要进入一个链接之前，我需要再你进入之前确定你能不能进入，而不是进入之后执行了一下方法之后，再告诉你不能进入。

2.react router与vue router比较

2-1.参考vue router

router.beforeEach((to, form, next) => {})

这里可以看到vue router提供了对应进入路由前的生命周期，所以我们可以直接使用。

2-2. 参考react router v6

说实话，我没找到对应类似生命周期方法。（有找到的小伙伴麻烦告知一下）

3. 实现思路

3-1. react router v6 对应Route 的API方法

看了对应Route的API，发现里面有个element属性。是render对应的路由页面组件的，所以想了一下，可不可以在这对应的页面组件外包一层，来实现路由守卫的功能。说干就干！

3-2. 原始 react router

key={item.path}

path={`${item.path}`}

errorElement={}

// 这里Comp代表页面组件

element={Comp}

/>

3-3. 改造 react router

key={item.path}

path={`${item.path}`}

errorElement={}

// 这里Comp代表页面组件 在对应的页面组件外面包一层

element={withGuard(Comp)}

/>

// 这里使用到 React 中的 Suspense 具体用法可移步 https://react.dev/reference/react/Suspense

const withGuard = (Comp:React.LazyExoticComponent>) => {

return (

element={

}

/>

)

}

3-4 Guard函数

Guard函数设计思路很简单，就是接受一个组件参数

export function Guard({ element }: { element: JSX.Element }) {

const location = useLocation()

const { pathname } = location

useEffect(() => {

// onRouterBefore 这个函数就是对路由地址进行处理的函数。具体实现根据自己项目来进行处理，返回是路由地址。

const nextPath = onRouterBefore(location)

if (nextPath && nextPath !== pathname) {

router.navigate(nextPath, { replace: true })

}

}, [pathname])

return element

}

总结

整个思路下来，其实react和vue还是有区别的，但基本思路是互通的，只要肯花时间去了解对应API的实现就可以了。 同时希望有更好思路的小伙伴能分享一下，我这边只是对页面组件进行了拦截，但是肯定比页面内部进行拦截效果要好的。

推荐链接

评论可见，请评论后查看内容，谢谢！！！
 您阅读本篇文章共花了：