react-router实现类似vue-router路由守卫

前言：

         摘取网上资料

react-router没有vue-router 的beforeEach钩子函数，可以使用react-router-config这个库去实现权限控制。

：所用react-router版本4.X

import React from 'react'
import { Route, Redirect, Switch } from 'react-router-dom'
const renderRoutes = (routes, authed, authPath = '/login', extraProps = {}, switchProps = {}) => routes ? (
  
    {routes.map((route, i) => (
       {
          if (!route.requiresAuth || authed || route.path === authPath) {
            return 
          }
          return 
        }}
      />
    ))}
  
) : null
 
export default renderRoutes
 

调用： renderRouters(路由配置表,authed,authPath)

其中：authed参数用redux存，登录后dispatch更改其值。

路由配置表

const Routes = [{path:'/',component:'Home',requiresAuth:'false'}]

import React from 'react'
import { Switch } from 'react-router-dom'
//import { renderRoutes } from 'react-router-config'
import renderRoutes from './utils/renderRoutes'
import routes from './router.js'
 
const authed = false // 如果登陆之后可以利用redux修改该值(关于redux不在我们这篇文章的讨论范围之内）
const authPath = '/login' // 默认未登录的时候返回的页面，可以自行设置
 
const App = () => (
   

      
         {renderRoutes(routes, authed, authPath)}
      
   
)
export default App