react 路由鉴权

最新推荐文章于 2024-10-23 10:26:48 发布

--北海道的夏天不会说再见--

最新推荐文章于 2024-10-23 10:26:48 发布

阅读量1.1k

点赞数 2

文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/lonsole/article/details/126415734

版权

react 路由鉴权：就相当于vue里面的 beforeRouter 路由守卫，如果没有登录就不会让用户进到首页，并且会重定向到登录页。

// 在 components 文件夹下新建 AuthComponent.jsx 文件
import { getToken } from "@/util"
import { Navigate } from "react-router-dom"
// 这是一个高阶组件：将组件作为参数传到另一个组件里面
// children 就是组件（参数）
function AuthComponent ({children}) {
	const isToken = getToken()
	if(isToken) {
		return <>
			{children}
		</>
	}else {
		// 重定向到登录页
	}
}

// 使用
// 将需要鉴权的组件用 AuthComponent 包裹起来
<Route path='/' element={
	<AuthComponent>
		<Layout />
	</AuthComponent>
}>
</Route>