react-router-dom實現全局路由登錄攔截

　　相比與vue的路由集中式管理，可以很好的進行統一的路由操做，react的路由看起來更亂，想要進行像vue的全局路由管理不是那麼駕輕就熟。在咱們的項目中，有不少頁面是須要登錄權限驗證的，最好的方式就是可以統一管理，而不是每一個頁面都要單獨處理，下面是個人實現方法：

　　首先咱們建一個文件routerMap.js用來存儲全部的路由信息，定義須要登錄攔截的頁面(auth)：

//routerMap.js

import Index from '../containers';
import Detail from '../containers/detail';
import Home from '../containers/home';
import List from '../containers/list';
import Topics from '../containers/topics';
import Parents from '../containers/passValue/parents';
import Children from '../containers/passValue/children';
import Request from '../containers/ajax';
import Like from '../containers/like';
import PopModule from '../containers/popModule/popModule';
import Reduxs from '../containers/redux/redux';
import Login from '../containers/login/login';
import Workers from '../containers/worker/worker';
import IndexedDB from '../containers/indexedDB/indexedDB';

export default [
  { path: "/", name: "App", component: Index },
  { path: "/home", name: "Home", component: Home },
  { path: "/topics", name: "Topics", component: Topics },
  { path: "/detail/:id", name: "Detail", component: Detail },
  { path: "/list", name: "List", component: List },
  { path: "/parents", name: "Parents", component: Parents },
  { path: "/children", name: "Children", component: Children },
  { path: "/ajax", name: "Request", component: Request, auth: true },
  { path: "/like", name: "Like", component: Like, auth: true },
  { path: "/popModule", name: "PopModule", component: PopModule, auth: true },
  { path: "/redux", name: "Reduxs", component: Reduxs, auth: true },
  { path: "/login", name: "Login", component: Login },
  { path: "/worker", name: "Worker", component: Workers },
  { path: "/indexedDB", name: "indexedDB", component: IndexedDB }
]

 

　　而後在App.js裏面引入：

 1 //App.js
 2 import React from 'react';
 3 import {
 4   BrowserRouter as Router,
 5   Route,
 6   Switch,
 7   Redirect
 8 } from 'react-router-dom';
 9 import { connect } from 'react-redux'
10 import Routers from './router/routerMap'
11 
12 // 公共頭部組件
13 import Header from './common/header'
14 // 404頁面
15 import NotFound from './containers/notFound'
16 
17 
18 class App extends React.Component {
19   constructor(props) {
20     super(props)
21   }
22   render() {
23     let token = this.props.token
24     return (
25       <Router>
26         <div>
27           <Header />
28           <Switch>
29             {Routers.map((item, index) => {
30               return <Route key={index} path={item.path} exact render={props =>
31                 (!item.auth ? (<item.component {...props} />) : (token ? <item.component {...props} /> : <Redirect to={{
32                   pathname: '/login',
33                   state: { from: props.location }
34                 }} />)
35                 )} />
36             })}
37             // 全部錯誤路由跳轉頁面
38             <Route component={NotFound} />
39           </Switch>
40         </div>
41       </Router>
42     )
43   }
44 }
45 
46 // redux拿到token並掛載到App的props上面
47 const mapStateToProps = (state, ownProps) => {
48   return { token: state.token }
49 }
50 
51 export default connect(mapStateToProps)(App)

　　以上代碼最重要的點是Route組建裏面用render屬性替換component來渲染頁面，根據routerMap.js中的每一條路由信息中的auth(自定義)字段來區分是否須要進行登錄攔截，再根據redux裏面的token字段來判斷是否是登錄狀態，而後進行相關的操做。若是已經攔截了就把當前的路由經過Redirect的state來傳遞到登錄頁面，在登錄頁面打印this.props來看控制檯的輸出：

　　以上紅框內的信息即爲重定向以前的頁面信息，若是登錄成功以後回跳from.pathname便可：

// 登錄成功方法 login.jsx
setToken() {
  let token = this.state.user + this.state.pwd
  if (!token) return
  let RedirectUrl = this.props.location.state ? this.props.location.state.from.pathname : '/'
  // 修改redux中的token值
  this.props.changeActive(token)
  // 登錄成功以後的跳轉
  this.props.history.push(RedirectUrl)
}

　　react全局的登錄攔截方法到此就完成了