这次给大家带来怎样使用react router4+redux实现路由权限控制，使用react router4+redux实现路由权限控制的注意事项有哪些，下面就是实战案例，一起来看一下。
总体概述
一个完善的路由系统应该是这样子的，当链接到的组件是需要登录后才能查看，要能够跳转到登录页，然后登录成功后又跳回来之前想访问的页面。这里主要是用一个权限控制类来定义路由路由信息，同时用redux把登录成功后要访问的路由地址给保存起来，登录成功时看redux里面有没有存地址，如果没有存地址就跳转到默认路由地址。
路由权限控制类
在这个方法里面，通过sessionstorage判断是否登录了，如果没有登录，就保存一下当前想要跳转的路由到redux里面。然后跳转到我们登录页。
import react from 'react'
import { route, redirect } from 'react-router-dom'
import { setloginredirecturl } from '../actions/loginaction'
class authorizedroute extends react.component {
render() {
const { component: component, ...rest } = this.props
const islogged = sessionstorage.getitem(username) != null ? true : false;
if(!islogged) {
setloginredirecturl(this.props.location.pathname);
}
return (
<route {...rest} render={props => {
return islogged
? <component {...props} />
: <redirect to="/login" />
}} />
)
}
}
export default authorizedroute
路由定义信息
路由信息也很简单。只是对需要登录后才能查看的路由用authorizedroute定义。
import react from 'react'
import { browserrouter, switch, route, redirect } from 'react-router-dom'
import layout from '../pages/layout/layout'
import login from '../pages/login/login'
import authorizedroute from './authorizedroute'
import nofound from '../pages/nofound/nofound'
import home from '../pages/home/home'
import order from '../pages/order/order'
import workorder from '../pages/order/workorder'
export const router = () => (
<browserrouter>
<p>
<switch>
<route path="/login" component={login} />
<redirect from="/" exact to="/login"/>{/*注意redirect转向的地址要先定义好路由*/}
<authorizedroute path="/layout" component={layout} />
<route component={nofound}/>
</switch>
</p>
</browserrouter>
)
登录页
就是把存在redux里面的地址给取出来，登录成功后就跳转过去，如果没有就跳转到默认页面，我这里是默认跳到主页。因为用了antd的表单，代码有点长，只需要看连接redux那两句和handlesubmit里面的内容。
import react from 'react'
import './login.css'
import { login } from '../../mock/mock'
import { form, icon, input, button, checkbox } from 'antd';
import { withrouter } from 'react-router-dom';
import { connect } from 'react-redux'
const formitem = form.item;
class normalloginform extends react.component {
constructor(props) {
super(props);
this.islogging = false;
}
handlesubmit = (e) => {
e.preventdefault();
this.props.form.validatefields((err, values) => {
if (!err) {
this.islogging = true;
login(values).then(() => {
this.islogging = false;
let topath = this.props.topath === '' ? '/layout/home' : this.props.topath
this.props.history.push(topath);
})
}
});
}
render() {
const { getfielddecorator } = this.props.form;
return (
<form onsubmit={this.handlesubmit.bind(this)} classname="login-form">
<formitem>
{getfielddecorator('username', {
rules: [{ required: true, message: 'please input your username!' }],
})(
<input prefix={<icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder=username />
)}
</formitem>
<formitem>
{getfielddecorator('password', {
rules: [{ required: true, message: 'please input your password!' }],
})(
<input prefix={<icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />} type=password placeholder=password />
)}
</formitem>
<formitem>
{getfielddecorator('remember', {
valuepropname: 'checked',
initialvalue: true,
})(
<checkbox>remember me</checkbox>
)}
<a classname="login-form-forgot" href="">forgot password</a>
<button type="primary" htmltype="submit" classname="login-form-button"
loading={this.islogging ? true : false}>
{this.islogging ? 'loging' : 'login'}
</button>
or <a href="">register now!</a>
</formitem>
</form>
);
}
}
const wrappednormalloginform = form.create()(normalloginform);
const loginstate = ({ loginstate }) => ({
topath: loginstate.topath
})
export default withrouter(connect(
loginstate
)(wrappednormalloginform))
顺便说一下这里redux的使用吧。我暂时只会基本使用方法：定义reducer，定义actions,创建store，然后在需要使用redux的变量时候去connect一下redux，需要dispatch改变变量时，就直接把actions里面的方法引入，直接调用就可以啦。为了让actions和reducer里面的事件名称对的上，怕打错字和便于后面修改吧，我建了个actionsevent.js来存放事件名称。
reducer:
import * as actionevent from '../constants/actionsevent'
const initialstate = {
topath: ''
}
const loginredirectpath = (state = initialstate, action) => {
if(action.type === actionevent.login_redirect_event) {
return object.assign({}, state, {
topath: action.topath
})
}
return state;
}
export default loginredirectpath
actions:
import store from '../store'
import * as actionevent from '../constants/actionsevent'
export const setloginredirecturl = (topath) => {
return store.dispatch({
type: actionevent.login_redirect_event,
topath: topath
})
}
创建store
import { createstore, combinereducers } from 'redux'
import loginreducer from './reducer/loginreducer'
const reducers = combinereducers({
loginstate: loginreducer //这里的属性名loginstate对应于connect取出来的属性名
})
const store = createstore(reducers)
export default store
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
使用js判断字符串中包含内容方法总结
angular+routerlink做出不同的花式跳转
以上就是怎样使用react router4+redux实现路由权限控制的详细内容。