react router v6路由守卫权限控制
前言
好久没更新文章了，主要是最近都在学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
<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 />}
// 这里Comp代表页面组件 在对应的页面组件外面包一层
element={withGuard(Comp)}
/>
// 这里使用到 React 中的 Suspense 具体用法可移步 https://react.dev/reference/react/Suspense
const withGuard = (Comp:React.LazyExoticComponent<ComponentType<any>>) => {
return (
<Guard
element={
<Suspense>
<Comp />
</Suspense>
}
/>
)
}
3-4 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的实现就可以了。
同时希望有更好思路的小伙伴能分享一下，我这边只是对页面组件进行了拦截，但是肯定比页面内部进行拦截效果要好的。
原文地址:https://blog.csdn.net/weixin_42381896/article/details/130369253
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若转载，请注明出处：http://www.7code.cn/show_17525.html
如若内容造成侵权/违法违规/事实不符，请联系代码007邮箱：suwngjj01@126.com进行投诉反馈，一经查实，立即删除！
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
