react+antd+less_x86(react登录访问控制)

• react登录访问控制
  • 　　

    import React from 'react';
    import { Route, Redirect } from 'react-router-dom';
    
    const AuthRoute = ( {component: Component, ...rest} ) => { //标签传入的参数compoennt，并重命名Component
        return <Route {...rest} render={ props => {
            let isLogin = sessionStorage.getItem('token');  
            if (isLogin) {
                return <Component  {...props}/> //如果登录了就渲染组件
            } else {
                //如没登录，就重定向到登录页面，并且通过属性state指定登录成功后要跳转回之前的页面路径
                return <Redirect to={ { pathname: '/' } }/>
            };
        }}></Route>
    };
    
    export default AuthRoute;

    import React, { Component } from 'react';
    import { Switch, Route, Redirect } from 'react-router-dom';
    import Home from './pages/Home/Home.jsx';
    import ColonyControl from './pages/ColonyControl/ColonyControl.jsx';
    import Login from './pages/Login/Login.jsx';
    import AuthRoute from './router/authRouter.js';
    
    export default class App extends Component {
        render () {
            return (
                <div>
                    <Switch>
                        {/* 主页路由 */}
                        <AuthRoute path="/home" component={Home}/>
                        {/* 群控路由 */}
                        <AuthRoute path="/colonyControl" component={ColonyControl}/>
                        {/* 登陆页面 */}
                        <Route path="/" component={Login}></Route>
                        {/* 重定向 */}
                        <Redirect to="/"></Redirect>
                    </Switch>
                </div>
            );
        };
    };