react router v6路由守卫权限控制



前言

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


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

一、个人需求

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

二、实现思路

1.路由守卫是什么

官方解释

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

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

2.react routervue 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

<Route
	key={item.path}
	path={`${item.path}`}
	errorElement={<ErrorPage />}
	// 这里Comp代表页面组件
	element={Comp}
/>

3-3. 改造 react router

<Route
	key={item.path}
	path={`${item.path}`}
	errorElement={<ErrorPage /&gt;}
	// 这里Comp代表页面组件 在对应页面组件外面包一层
	element={withGuard(Comp)}
/&gt;
// 这里使用到 React 中的 Suspense 具体用法可移步 https://react.dev/reference/react/Suspense

const withGuard = (Comp:React.LazyExoticComponent<ComponentType<any&gt;&gt;) => {	
	return (
		<Guard
			element={
				<Suspense>
					<Comp />
				</Suspense>
			}
		/>
	)
	}

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 &amp;&amp; nextPath !== pathname) {
			router.navigate(nextPath, { replace: true })
		}
	}, [pathname])
	return element
}

总结

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

原文地址:https://blog.csdn.net/weixin_42381896/article/details/130369253

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任

如若转载,请注明出处:http://www.7code.cn/show_17525.html

如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱suwngjj01@126.com进行投诉反馈,一经查实,立即删除

发表回复

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