reactjs – 使用react-router-v4在路由上执行身份验证

发布时间：2020-12-15 20:16:46 所属栏目：百科来源：网络整理

导读：我正在尝试为我的DashBoard编写身份验证检查.但是函数本身并没有被调用.谁能给我一些解决方案呢？我在ReactJs开发. 这是路线部分： Router div Route exact path={"/"} component={Home} / Route path={"/SignUp"} component={SignUp} / Route path={"/SignI

我正在尝试为我的DashBoard编写身份验证检查.但是函数本身并没有被调用.谁能给我一些解决方案呢？我在ReactJs开发.

这是路线部分：

<Router>
            <div>
              <Route exact path={"/"} component={Home} />
              <Route path={"/SignUp"} component={SignUp} />
              <Route path={"/SignIn"} component={SignIn} />
              <Route path={"/Dashboard"} component={Dashboard} onEnter={this.requireAuth} />
            </div>
          </Router>

这是功能：

requireAuth (nextState,replace) {
    console.log("?????????????",this.state.getToken);
    if(!this.state.getToken) {
      replace({pathname: '/'});
    }
  }

解决方法

在react-router v4中,您可以使用render prop和生命周期方法来替换react-router v3中存在的onEnter功能.

有关详细信息,请参阅此答案：

onEnter prop in react-router v4

但是,由于您只想在onEnter prop中进行身份验证,因此您可以轻松创建一个执行此操作的HOC

const RequireAuth = (Component) => { 

    return class App extends Component { 

        componentWillMount() { 
            const getToken = localStorage.getItem('token'); 
            if(!getToken) { 
               this.props.history.replace({pathname: '/'}); 
            } 
        } 
        render() { 
           return <Component {...this.props} /> 
        }
    } 

} 

export { RequireAuth }

并使用它

<Route path={"/Dashboard"} component={RequireAuth(Dashboard)}/>

编辑：如果您需要进行网络调用以查找是否使用了身份验证,您可以编写HOC之类的

const RequireAuth = (Component) => { 

    return class App extends Component { 
        state = {
            isAuthenticated: false,isLoading: true
        }

        componentDidMount() {
            AuthCall().then(() => {
                this.setState({isAuthenticated: true,isLoading: false});
            }).catch(() => {
                this.setState({isLoading: false});
            })
        } 
        render() { 
           const { isAuthenticated,isLoading } = this.state;
           if(isLoading) {
               return <div>Loading...</div>
           }
           if(!isAuthenticated) {
               return <Redirect to="/login" />
           }
           return <Component {...this.props} /> 
        }
    } 

} 

export { RequireAuth }

更新：

除了HOC之外,您还可以使用PrivateRoute组件

const PrivateRoute = ({component: Component,isAuthenticated,isLoading,...rest }) => { 
           if(isLoading) {
               return <div>Loading...</div>
           }
           if(!isAuthenticated) {
               return <Redirect to="/login" />
           }
           return <Component {...this.props} /> 
        }
    } 
} 

 export { PrivateRoute };

你可以像使用它一样

class App extends Component { 
        state = {
            isAuthenticated: false,isLoading: false});
            }).catch(() => {
                this.setState({isLoading: false});
            })
        } 
        render() { 
           <Router>
              <div>
                  <Route exact path={"/"} component={Home} />
                  <Route path={"/SignUp"} component={SignUp} />
                  <Route path={"/SignIn"} component={SignIn} />
                  <PrivateRoute path={"/Dashboard"} component={Dashboard} isAuthenticated={this.state.isAuthenticated} isLoading={this.isLoading}/>
               </div>
           </Router>
        }
    }

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!