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 (
            

                "link" to="/home" >Home
                "link" to="/user" >User
                "link" to="/login" >Login
                "link" to="/list" >List
                "link" to="/error" >Error
                
                    from='/' to='/home' />
                    "/home" component={Home}/>
                    '/user' component={User}/>
                    "/login" component={Login}/>
                    "/list" component={List}/>
                    '/error' component={Error} />
                    
                
            

        )
    }
}
ReactDOM.render(
    
     
    ,
    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  {
//         return   Math.random() <0.5 ?  : 
       
//     }}/>
// }
 
 
//类组件的写法
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
            {
                //将传递进来的props展开传给Route组件，render函数接收参数props并进行一系列判断，决定路由跳转至哪个组件，同时可以将props继续向下传递
                        return (this.state.authuser?this.state.username}/> : '/login' />      )          
                    }}/>
        )
    }
}
export default Authuser

摘抄保存用的 非原创

更多专业前端知识，请上 【猿2048】www.mk2048.com