基于React16.7及React Router V4的代码分片和登陆验证

情况一 登陆组件<login>没有需要render的内容

这种情况是例如接入单点登陆，有专门的统一的登陆页面，登陆页面不包含在当前前端项目中。
这种情况比较好办，在<Router>组件里面的<switch>外面渲染<login>组件即可。这样不管渲染<Switch> 里面的哪个组件还是刷新，都会先经过<Login>验证。 同时我们再尝试下React16. 7引入的Lazy和Suspend。

import React, { Suspense, lazy } from "react";
import { HashRouter, Route, Switch } from "react-router-dom";
import Authen from "./components/Authen";
const Login = lazy(() => import("./pages/Login"));
const List = lazy(() => import("./pages/List"));

function App() {
  return (
    <div className="App">
      <HashRouter>
        <>
          <Authen />
          <Suspense fallback={""}>
            <Switch>
              <Route exact path="/" component={Login} />
              <Route path="/login" component={Login} />
              <Route path="/list" render={props => <List {...props} />} />
            </Switch>
          </Suspense>
        </>
      </HashRouter>
    </div>
  );
}

情况二 登陆组件需要render内容

这种情况下登陆页面需要渲染自己的内容，比如用户名密码输入框等。登陆页面包含在当前前端项目中。
这种情况需要把<login>组件放在<Switch>里面，再利用<Switch>里面另外的组件包装<Redirect>

//app.js
<Switch>
      <Route path='/login' render={props => <Login {...props}  user={user.username} />} />
      <AuthRoute auth={user.username}>
           <Switch>
               <Route path="/list" render={props => <List {...props} />} />
           </Switch>
      </AuthRoute>
</Switch>

//login.js 如果有user(app.js通过请求api得到)，进入/login会跳转到/list
return <>
        {user ? <Redirect to="/list" /> :
            <Login login={login} />}
    </>;

//AuthRoute组件，如果有auth props渲染Children,否则进入/login
import React from 'react';
import { Redirect,Route } from "react-router-dom";
function AuthRoute({ auth, children ,...rest}) {
    return <Route
        {...rest}
        render={props => auth ? children : (
            <Redirect
                to={{
                    pathname: "/login",
                }}
            />
        )}
    />
}