React 保护式路由

大多数情况中，我们必须先验证登录状态才能进入到主页，所以需要保护式路由。这里，需要保护的路由是Admin，如果登录没通过则先进入Login路由组件。

class App5 extends React.Component {
    render(){
        return (
            

                

                    

                        Home
                    
                    

                        Category
                    
                    

                        Products
                    
                    

                        Admin
                    
                
                
                
                
                

                {/*自定义路由*/}
                
            
        )
    }
}

const Home = props => 
This is Home {console.log('Home-Props')}{console.log(props)}

const Admin = () => 
Welcome to admin!


// 自定义路由
const PrivateRoute = (({component:Component,...rest}) => {
    return (
        
                // 如果登录验证通过则进入Admin路由组件
                fakeAuth.isAuthenticated === true
                ?()
                // 将from设置为Admin路由pathname，并传递给子组件Login
                :()
            }
         />
    )
})



export default App5

Login路由组件如下

class Login extends React.Component {
    constructor(){
        super()
        this.state = {
            toAdmin:false
        }
    }

    login = () =>{
        fakeAuth.authenticate(() => {
            this.setState({
                toAdmin:true
            })
        })
    }

    render(){
        const from = this.props.location.state.from
        const toAdmin = this.state.toAdmin
        if(toAdmin) {
            return (
                
            )
        }
        return (
            

            {console.log(this.props)}
                
You must log in then go to the{from} 
                
                    Log in
                
            
        )
    }
}

export default Login


export const fakeAuth = {
    // 验证状态
    isAuthenticated:false,
    authenticate(cb){
        this.isAuthenticated = true
        setTimeout(cb,100)
    }
}

打印台中 从Admin路由组件传递给子组件Login的Props如图

Props

// 自定义路由
const PrivateRoute = (({component:Component,...rest}) => {
    return (
        
                // 如果登录验证通过则进入Admin路由组件
                fakeAuth.isAuthenticated === true
                ?()
                // 将from设置为Admin路由pathname，并传递给子组件Login
                :()
            }
         />
    )
})

自定义路由传递给Login组件的state也在里面