12 React Router Route Render渲染组件 权限校验

权限验证

render

Route render实现组件渲染

权限校验

设置routes数组，有id,auth,component这三个属性
auth为false,说明是不需要权限访问的组件，可以直接访问
auth为true，说明是需要权限(需要登录)访问的组件
isLogin为false，说明需要登录才能访问
isLogin为true,说明已经可以访问
登录组件里面实现改变父组件数组auth的逻辑

import React, { Component } from 'react';
import {
    BrowserRouter as Router, Route,Link
} from 'react-router-dom'

import HomePage from './HomePage'
import Login from './Login'
import PositionPage from './PositionPage'

console.log(PositionPage)

class Index extends Component {

    routes = [
        {
            id: 1,
            component: Login,
            path: '/login'
        },
        {
            id: 2,
            component: PositionPage,
            auth: true,
            path: '/position'
        },
        {
            id: 3,
            component: HomePage,
            auth: false,
            path: '/homepage'
        }
    ]

    constructor() {
        super();
        this.state = {
            routes: this.routes,
            isLogin: false
        }
    }

    //点击登录，显示路由匹配的相应组件
    loginHandler=()=>{
        console.log('asdas');
        this.setState({
            isLogin:true
        })
    }

    render() {
        return (
            <Router>
                <Link to="/homepage">首页</Link>
                <Link to="/position">职位管理</Link>
                <hr/>
                {
                    this.state.routes.map(item => {
                        //需要权限的路由组件，转到登录逻辑判断
                        //不需要权限的组件，直接匹配路由显示相应组件
                        if (item.auth) {
                            return (
                                <Route key={item.id} path={item.path} render={() => {
                                    return this.state.isLogin ? <item.component></item.component> : <Login loginClick={this.loginHandler}></Login>
                                }}></Route>
                            )
                        } else {
                            return <Route key={item.id} path={item.path} render={()=><item.component></item.component>}></Route>
                        }
                    })
                }
            </Router>
        );
    }
}

export default Index;