react前置路由守衛

react中一切皆組件--2018.7.18
 
目標:自定義user界面的前置路由守衛,當用戶點擊要進入user組件時，路由守衛發起判斷，如果條件滿足則進入，否則跳轉至login組件。
 
 
1.入口文件index.js中代碼如下:
 
import React,{Component} from 'react';
import ReactDOM from 'react-dom';
import registerServiceWorker from './registerServiceWorker';
import Home from './routes/home'
import {BrowserRouter,Route,Switch,Redirect,NavLink} from 'react-router-dom'
import User from './routes/user';
import Login from './routes/login';
import List from './routes/list';
import Error from './routes/error'
import Authuser from './routes/authuser'
import './assets/link.css'
class App extends Component{
    render(){
        return (
            <div>
                <NavLink activeClassName="link" to="/home" >Home</NavLink>
                <NavLink activeClassName="link" to="/user" >User</NavLink>
                <NavLink activeClassName="link" to="/login" >Login</NavLink>
                <NavLink activeClassName="link" to="/list" >List</NavLink>
                <NavLink activeClassName="link" to="/error" >Error</NavLink>
                <Switch>
                    <Redirect exact from='/' to='/home' />
                    <Route path="/home" component={Home}/>
                    <Authuser path='/user' component={User}/>
                    <Route path="/login" component={Login}/>
                    <Route path="/list" component={List}/>
                    <Route path='/error' component={Error} />
                    <Route component={Error} />
                </Switch>
            </div>
        )
    }
}
ReactDOM.render(
    <BrowserRouter >
     <Route component={App}/>
    </BrowserRouter>,
    document.getElementById('root'));
registerServiceWorker();
 
其中authuser是我們自定義的組件，當給組件添加path和component兩個props后，這個組件會被識別為一個route，因此點擊User鏈接后，會觸發Authuser組件
 
 
2.Authuser的代碼如下:
import React,{Component} from 'react';
import {Route,Redirect} from 'react-router-dom'
 
//函數式組件的寫法
// let Authuser = ({component:Component,...rest})=>{
//     return  <Route {...rest} render={(props)=>{
//         return   Math.random() <0.5 ? <Component {...props}/> : <Redirect to='/login' />
       
//     }}/>
// }
 
 
//類組件的寫法
class Authuser extends Component{
    constructor(){
        super()
        this.state={
            hasReq:false,
            authuser:false,
            username:"",
            data:{}
        }
    }
    componentDidMount(){
        //組件掛載完畢之后異步讀取數據，並更新state
        fetch(
            `/data/data.json`
        ).then(
          (res)=>{
            return res.json()
          }
        ).then((res)=>{
            this.setState(
                {
                    hasReq:true,
                    authuser:res.authuser,
                    username:res.id,
                    data:res.password
                }
            )
        })
    }
    render(){
        let {component:Component,...rest} = this.props
        //解構組件身上的props，將component單獨拿出來，如果條件滿足，則允許進入該component，將剩余參數放入rest，rest是一個對象
        //此處Component == User
        if (!this.state.hasReq) {return null}
        //組件被觸發后會首先渲染一次，但此時state中的hasReq狀態未被更新，當此處hasReq未被更新時，我們先不渲染頁面，直到組件掛載完畢異步操作返回結果並更新state中的數據后，我們再執行下一步操作
        return (
                //組件最終返回的仍然是一個Route
            <Route {...rest} render={(props)=>{
                //將傳遞進來的props展開傳給Route組件，render函數接收參數props並進行一系列判斷，決定路由跳轉至哪個組件，同時可以將props繼續向下傳遞
                        return (this.state.authuser?<Component  {...props} username={this.state.username}/> : <Redirect to='/login' />      )          
                    }}/>
        )
    }
}
export default Authuser

摘抄保存用的 非原創