zoukankan      html  css  js  c++  java
  • 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

    摘抄保存用的 非原创

  • 相关阅读:
    代码书写的细节
    php中的正则函数主要有三个-正则匹配,正则替换
    2个比较经典的PHP加密解密函数分享
    淘宝运营中的6大致命误区,你犯过么?
    30分钟教你写出10分的淘宝标题
    超全的web开发工具和资源
    转化率不好?告诉你转化飙秘诀
    帮你店铺日销千单的20个淘宝小技巧
    不刷单,中小卖家如何提升店铺流量?
    使用Flexible实现手淘H5页面的终端适配
  • 原文地址:https://www.cnblogs.com/wenbodeboke/p/9915347.html
Copyright © 2011-2022 走看看