实现一个react-router-dom的路由拦截

实现路由守卫需要考虑到以下的问题：

1. 未登录情况下，访问不需要权限校验的合法页面：允许访问
2. 登陆情况下，访问登陆页面：禁止访问，跳转至主页
3. 登陆情况下，访问除登陆页以外的合法页面：允许访问
4. 登陆情况下，访问所有的非法页面：禁止访问，跳转至 404
5. 未登录情况下，访问需要权限校验的页面：禁止访问，跳转至登陆页
6. 未登录情况下，访问所有的非法页面：禁止访问，跳转至 404

react实现路由拦截的基本思路还是利用Route 的render函数。通过判断拦截条件来实现不同的组件的跳转，从而实现拦截。
首先在跟目录src下创建一个routerMap.js文件，代码如下： 
import Index from "./page/index";
import Home from "./page/home";
import ErrorPage from "./page/error";
import Login from "./page/login";
export default [
  { path: "/", name: "App", component: Index, auth: true },
  { path: "/home", name: "Home", component: Home, auth: true },
  { path: "/login", name: "Login", component: Login },
  { path: "/404", name: "404", component: ErrorPage },
];

将 auth 设置为 true，表示该路由需要权限校验。
然后，定义 Router 组件，在App.js中，该组件是经过高阶组件包装后的结果：
//App.js
import React, { Component } from "react";
import { BrowserRouter as Router, Switch } from "react-router-dom";
import FrontendAuth from "./FrontendAuth";
import routerMap from "./routerMap";
class App extends Component {
  // eslint-disable-next-line no-useless-constructor
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <Router>
        <div>
          <Switch>
            <FrontendAuth routerConfig={routerMap} />
          </Switch>
        </div>
      <