react 高阶组件完成对组件的权限控制

我们在路由的这一块，我们准备完成vue的类似的权限控制功能

router.beforeEach() 功能，这个功能过react 高阶组件实现，类似Java的代理

Gaojiezujian.js

import React, { Component } from 'react'
// connect 函数连接以下
import { connect } from "react-redux"
// 高阶组件，就是对原来的组件进行封装
import { Route, Redirect } from "react-router-dom"
// <Gaojiezujian component= {} path = "/abc" >
class Gaojiezujian extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        const { isLogin, path, component } = this.props;// 结构语法的概
        if (isLogin) {
            return (
                // 如果已经登陆，就直接显示原来的组件
                <Route exact path={path} component={component}></Route>
            )
        } else {
            return (
                <div>
                    你还有没有登陆好吧！
                    <Redirect to={
   
   { pathname: '/login', "from": { path } }} > </Redirect>
                </div>
            )
        }
    }
}

// 写法
// es6 
const mapStateToProps = state => ({ isLogin: state.user.isLogin })

const MapActionCreater = {
    //这里主要是映射方法，去操作action 去分发请求

}

export default connect(
    mapStateToProps, MapActionCreater
)(Gaojiezujian);

Gaojizujian.js 就是对Route 的封装，所以说要接收 path 和 component 俩参数

isLogin 是 redux 注入进来的，所以要用connect 函数连接以下：

这个高级组件的逻辑，就是，若登陆过，则直接放行，若

没有登陆，则跳转到登陆页面

我们看下登陆页面

import React, { Component } from 'react'
import { connect } from 'react-redux'

// 在这里能拿到from ??
class LoginPager extends Component {
    constructor(props) {
        super(props);
    }
    render() {

        return (
            <div>
                <button onClick={() => this.realLogin()}>登陆</button>
            </div>
        )
    }
    realLogin() {
        const { history, login, location } = this.props;
        const { path } = location.from;
        console.log(path, this.props);
        login();
        history.replace(path);
    }
}
//
export default connect(state => ({ isLogin: state.user.isLogin }),
    {
        login: () => ({ type: "login" })
    })(LoginPager);

我们这个登陆也需要去修改redux 的状态，所以要连接redux ，

还有一个逻辑就是登陆成功后，跳转到目标页面：

我们重点看下 from 咋传递进来

还有一块就是redux 中的reducer逻辑，我们就穿起来了

行，这就可以使用高阶组件了

刚开始去目标页面的时候，没登陆，所以去登陆页面，登陆页面有一个按钮，你点登陆，就登陆了，然后再回调到目标页面

react 高阶组件完成对组件的权限控制

猜你喜欢