我们在路由的这一块,我们准备完成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逻辑,我们就穿起来了
行,这就可以使用高 阶组件了
刚开始去目标页面的时候 ,没登陆,所以去登陆页面,登陆页面有一个按钮,你点登陆,就登陆了,然后再回调到目标页面