高阶函数做登录拦截

思路：页面一进来首先是首页，当点击做路由跳转，同时在store中存储要去到页面的路径。这时利用高阶组件来校验在要去到的页面，浏览器本地存储是否有已登录的用户信息，如果没有就是视为没有登录，跳到登录页面进行用户登录。登录成功后，在store中存储用户名并在浏览器本地存储。利用shouldComponentUpdate(nextProps,nextState)生命周期判断store之前的用户和现在的用户信息是否相同。进行跳到要去的页面。

下面是代码片段：

封装的高阶组件

//这是高阶组件 高阶组件就是一个函数，接受一个组件，返回一个组件
import React,{Component} from 'react'
function withLogin(Com){//需要校验是否登录的组件传进来
    return class index extends Component{
        componentDidMount(){//判断是否登录
            if(!(localStorage.getItem('loginStatus')&&JSON.parse(localStorage.getItem('loginStatus')))){
                // 如果没有拿到在浏览器存储的用户
                this.props.history.push('/webLogin')//就跳到登录页面
            }else{
                console.log('登陆拦截')
            }
        }
        render(){
            return (
                <Com {...this.props}>
                    {/* 拿一下组件的props */}
                </Com>
            )
        }
    }
}
export default withLogin

 

要去到的页面

 

import React,{Component} from 'react'
import withLogin from '../../../Hoc/withLogin'//引一下自己写的高阶组件
//这是点击要去到的页面
class detail extends Component{
    render(){
        return (
            <div>
                我是你详情大爷！！！！！！臭婊贝儿..
            </div>
        )
    }
}
detail=withLogin(detail)//把本组件当做参数传到高阶组件内
export default detail

 

登录页面

 

class login extends Component{
    state={
        // value:1
    }
     onFinish = values => {
        if(values.username&&values.password){
            console.log(values.username)
            this.props.goto(values.username,values.password)
        }
    }
    shouldComponentUpdate(nextProps,nextState){//登录前后利用此生命周期做数据对比进行跳转
        if(this.props!==nextProps){//如果更新前后的值不一样时
            this.props.history.push(this.props.url)//就跳到要去的页面
        }
        return true
    }
    render(){
        return (
            <div className={s.login}>
                <div className={s.top}>
                    <span>×</span>
                    <span style={{fontSize:'14px'}}>帮助</span>
                </div>
                <span className={s.logo}>
                    欢迎登录农场App
                </span>
                <div className={s.bar}>
                <Form
                    name="normal_login"
                    className="login-form"
                    initialValues={{ remember: true }}
                    onFinish={this.onFinish}
                    >
                    <Form.Item
                        name="username"
                        rules={[{ required: true, message: 'Please input your Username!' }]}
                    >
                        <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="Username" />
                    </Form.Item>
                    <Form.Item
                        name="password"
                        rules={[{ required: true, message: 'Please input your Password!' }]}
                    >
                        <Input
                        prefix={<LockOutlined className="site-form-item-icon" />}
                        type="password"
                        placeholder="Password"
                        />
                    </Form.Item>
                    <Form.Item >
                        <Form.Item name="remember" valuePropName="checked" noStyle>
                        <Checkbox>记住密码</Checkbox>
                        </Form.Item>
    
                        <a style={{marginLeft:'160px'}} className="login-form-forgot" href="">
                            修改密码
                        </a>
                       
                    </Form.Item>
                    <Form.Item>
                        <Button style={{background:'#33b17b'}}  block='true' type="primary" htmlType="submit" className="login-form-button">
                            登录
                        </Button>
                        {/* Or <a href="">register now!</a> */}
                    </Form.Item>
                    </Form>
                </div>
            </div>
        )
    }
    
}
let mapStateToProps=(state)=>{
    return {
        user:state.user.user,//登录的用户名
        url:state.user.withUrl//要跳到的页面路径
    }
}
let mapDispatchToProps=(dispatch,props)=>{
    return {
        goto(username,password){
            dispatch(loginer(username,password,props))
        }
    }
}
export default connect(mapStateToProps,mapDispatchToProps)(login)