react路由权限控制
方式: 在外部包一层
利用PermissionControls组件,在这个组件内部进行权限判断处理
<Route component={Acom}>
<Route component={(props) => {
<PermissionControls render={Acom} {...props}> </PermissionControls>
}
}>
permissionControls组件
import { useState } from "react"
function permissionControls() {
const [isHasPermission, setIsHasPermission] = useState(false)
getPermission() {
//setIsHasPermission 判断赋值
}
return (
isHasPermission ?
<props.render location={props.location}></props.render>
: '无权限'
)
}
踩坑点
1. 因为非路由组件, props.location数据不存在, 在用permisssionControls包裹后, 之前的路由组件就不在是路由直接挂载的组件,此时 变为PermissionControls的子组件;
**所以在权限控制组件的return里, 子组件一定要手动: location = {props.location} 传入**
2. 动态组件的引入 函数 一定要写传参: props, 并在 <PermissionControls {...props}> 传入, 否则在permissionControls组件也获取不到 路由数据