大佬教程收集整理的这篇文章主要介绍了React Router v4-使用HOC的授权路由，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
好的，因此，根据您的逻辑，禁止未经授权的用户访问用户组件。简单公平。没问题。
但我担心的是，您是否正在检查用户是否登录了未经身份验证的用户不应进入的组件内部。我认为这是不正确的，因为：
这是我们程序的额外旅程-增加了不必要的效率低下。有可能我们从路由器转到“用户”组件，而“用户”组件会将我们发送回前者。乒乓。
用户组件看起来很脏。具有无关紧要的逻辑。是的，无关紧要。因为不应在用户组件中进行身份验证检查。用户组件应包含与用户相关的内容。
您认为如果不在路由器内部检查用户身份验证，而是在路由器中进行检查，您会怎么想？顾名思义，用户组件是专用于用户的，应该从那里取出检查身份验证的逻辑。
我们@R_607_9838@一个高阶组件（HOC），将其作为传递给它的任何组件的参数。然后，我们在HOC内添加身份验证逻辑，最后，根据我们使用的逻辑，我们可以重定向到主页或允许对给定组件的请求。
为了使HOC能够执行上述操作，它需要访问：
让我们命名HOC required_auth。这是它的代码：
import React, { Component } from 'react';
import { connect } from 'react-redux';
export default function(ComposedComponent) {
class Authentication extends Component {
static contextTypes = {
router: React.PropTypes.object
}
componentwillMount() {
if (!this.props.authenticated) {
this.context.router.history.push('/');
}
}
componentwillupdate(nextProps) {
if (!nextProps.authenticated) {
this.context.router.history.push('/');
}
}
render() {
return <ComposedComponent {...this.props} />
}
}
function mapStatetoProps(statE) {
return { authenticated: state.auth.authed };
}
return connect(mapStatetoProps)(Authentication);
}
如您所见，这里没有发生黑魔法。可能令人困惑的是
static contextTypes = {
router: React.PropTypes.object
}
由于this.context非常易于访问和滥用，因此React迫使我们以这种方式定义上下文。
。上下文的用例并不常见。在此处详细了解可能的后果
总结一下我们的HOC，它只是将一个组件作为参数，然后重定向到首页或返回将传递给它的组件。
现在使用它，在路由文件中，我们导入HOC
import requiredAuth from './components/auth/required_auth';
以及我们想要防止未经授权的用户访问的任何路由，我们只需按以下方式进行路由：
<Route path="/user" component={requiredAuth(User)}/>
上面的行将直接指向首页或返回我们传递的组件， User
我有一个问题要阻止未经授权的用户访问仅授权的路由/组件-例如登录的用户仪表板
我有以下代码：
import React from 'react'
//other imports
import {withRouter} from 'react-router'
class User extends React.Component {
constructor(props) {
super(props)
console.log('props',props)
let user = JSON.parse(localStorage.getItem('userDetails'))
if(!user || !user.user || props.match.params.steamId !== user.user.steamId) {
props.history.push('/')
} else {
this.props.updateUserState(user)
this.props.getUser(user.user.steamId)
}
}
//render function
}
//mapStateToProps and mapDispatchToProps
export default withRouter(connect(mapStateToProps,mapDispatchToProps)(User))
路由器：
render() {
return (
<Router>
<div>
<Route exact path="/" component={Main}/>
<Route path="/user/:steamId" component={User}/>
<Route path="/completelogin" component={CompleteLogin}/>
</div>
</Router>
)
}
我尝试记录日志以检查是否已输入条件，但是从渲染函数收到错误消息，提示它无法读取null属性。
有没有办法解决我的问题，并且有更好的方法来满足我的要求？只有授权用户才能严格访问特定组件
以上是大佬教程为你收集整理的React Router v4-使用HOC的授权路由全部内容，希望文章能够帮你解决React Router v4-使用HOC的授权路由所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。