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;