原理
react路由守卫 是通过 高阶组件(HOC) 实现的
因此针对不同的情况就要封装不同的 HOC
接下来展示一个有关登录权限的路由守卫例子
demo
import React from 'react'
import {
Route, Redirect } from 'react-router-dom'
import {
connect } from 'react-redux'
export default connect(({
user }) => ({
isLogin: user.isLogin }))(
function PrivateRoute({
isLogin, component: Component, ...rest }) {
return (
{
...rest}
render={
props =>
isLogin ? (
...props} />
) : (
to={
{
pathname: '/login',
state: {
redirect: props.location.pathname },
}}
/>
)
}
/>
)
}
)
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/hz/129118.html