react登录页面_React 实现路由拦截

接到个新项目，使用的是React，由于React没有属于自己的路由拦截方法，只有自己封装Route成高阶组件来实现，现记录下实现的方式：

首先创建一个router文件，引入项目需要展示的组件。

    export const routes = [{path: '/live',component: LiveSquare},{path: '/monit',component: MonitoringCenter},]

2. 创建一个PrivateRoute文件，判断是否已登录，已登录则进入页面，否则重定向到登录页

import React from 'react'
import { Route, Redirect } from 'react-router-dom';
let authenticate = ()=> {const token = localStorage.getItem("token");return token ? true : false;
}
const PrivateRoute = ({ component: Component, ...rest }) => {console.log('authenticate1',authenticate())return (<Route{...rest}render={props => authenticate() ? <Component {...props} /> :<Redirect to={{pathname: "/login",state: { from: props.location }}} />}></Route>)
}export default PrivateRoute

3.接着创建一个ContenMain文件，用于将第一步中创建的router文件中引入的页面展示，此处需要使用到React的高阶组件withRouter，后续跳转页面的时候可以获取到history。

import React,{Component} from 'react';
import {Switch,withRouter,Route} from 'react-router-dom';
import PrivateRoute from '@/router/PrivateRoute';
import {routes} from '@/router/route';class ContentMain extends Component{render(){return(<div className="routeWrap"><Switch>{routes.map(item=>{return (item.path?<PrivateRoute path={item.path} exact component={item.component}/>:<Route component={NoMatch}/>)})}</Switch></div>)}
}
export default withRouter(ContentMain);

4.以上文件配置好后就可以在app.js中引用PrivateRoute文件

import React from 'react';
import { HashRouter, Route, Switch, Redirect } from 'react-router-dom'
import Index from '@/Page/Index/index';
import Login from '@/Page/Login/Login.js'
import PrivateRoute from '@/router/PrivateRoute';
class App extends React.Component {constructor(props) {super(props);this.state = {};}componentWillMount() {}render() {const { isLogins } = this.state;return (<HashRouter ><Switch><Route path='/login' component={Login} /><PrivateRoute path='/' component={ Index }></PrivateRoute></Switch></HashRouter>);}
}export default App;

ContenMain是展示登录成功后的页面的，所以是在Index.js中引用就可以了

import React from 'react';
import Navigation from '@/Page/Navigation/Navigation';
import { Layout } from 'antd';
import ContentMain from '@/Components/ContenMain';
function Home() {return (<Layout><Navigation /><Layout><ContentMain /></Layout></Layout>);
}
export default Home;

一个封装的路由拦截就实现了，如果有什么不对的地方欢迎留言指正

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/244459.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！