react路由守卫

1.路由守卫高阶组件的编写

        

import React from 'react'
import { Route, Redirect } from 'react-router-dom'
import { message } from 'antd'

export default function AuthRoute({ component: Component, ...rest }) {
    return (
        <Route {...rest} render={(props) => {
            const sid = !!sessionStorage.getItem('sid')
            if (!sid) {
                message.error('请先登录!')
                return (
                    <Redirect to={{
                        pathname: '/',
                        state: {
                            from: props.location
                        }
                    }} />
                )
            } else {
                return <Component {...props} />
            }
        }}></Route>
    )
}

2.高阶组件的引用以及路由的定义

import React, { Component } from 'react'
import { Route, Switch, Redirect } from 'react-router-dom'
import AuthRoute from './components/AuthRoute'
import loginfrom './pages/login'
import cloudviewfrom './pages/cloudview'
import Home from './pages/Home'

export default class App extends Component {
    render() {
        return (
            <div style = {{height:'100%'}}>
                {/* 一级路由注册 */}
                <Switch>
                    <Route exact path='/' render={() => <Redirect to='/login'/>}></Route>
                    <Route path='/login' component={Login}></Route>
                    <AuthRoute path='/cloudview' component={CloudView}></AuthRoute>
                    <AuthRoute path='/home' component={Home}></AuthRoute>
                </Switch>
            </div>
        )
    }
}