实装路由登录与验证机制

src/components/common/login.jsx

@@ -0,0 +1,43 @@
+import React from 'react'
+import { Redirect } from 'dva/router'
+
+
+function authenticate(cb) {
+    window.localStorage.setItem("isAuthenticated", "true");
+    setTimeout(cb, 100); // fake async
+}
+
+function signout(cb) {
+    window.localStorage.setItem("isAuthenticated", "false");
+    setTimeout(cb, 100); // fake async
+}
+
+class Login extends React.Component {
+    state = {
+        redirectToReferrer: false
+    };
+
+    login = () => {
+        authenticate(() => {
+            this.setState({ redirectToReferrer: true });
+        });
+    };
+
+    render() {
+        const { from } = this.props.location.state || { from: { pathname: "/" } };
+        const { redirectToReferrer } = this.state;
+
+        if (redirectToReferrer) {
+            return <Redirect to={from} />;
+        }
+
+        return (
+            <div>
+                <p>You must log in to view the page at {from.pathname}</p>
+                <button onClick={this.login}>Log in</button>
+            </div>
+        );
+    }
+}
+
+export default Login

src/routes/router.js

@@ -1,24 +1,50 @@
 import React from 'react'
 import { LocaleProvider } from 'antd'
-import { Router, Route, Switch } from 'dva/router'
+import { Router, Route, Switch, Redirect } from 'dva/router'
 import MainLayout from './mainLayout'
 import ChartDesigner from '../components/chartDesigner/layout'
 import DashboardDesigner from '../components/dashboardDesigner/layout'
 // 由于 antd 组件的默认文案是英文，所以需要修改为中文
 import zhCN from 'antd/lib/locale-provider/zh_CN'
+import Demo from '../demo';
+import Login from '../components/common/login';
+
+window.localStorage.setItem("isAuthenticated", "false");
+
+
+
+
+const PrivateRoute = ({ component: Component, ...rest }) => (
+    <Route
+        {...rest}
+        render={props =>
+            (window.localStorage.getItem("isAuthenticated") === "true"? true: false)  ? (
+                <Component {...props} />
+            ) : (
+                    <Redirect
+                        to={{
+                            pathname: "/login",
+                            state: { from: props.location }
+                        }}
+                    />
+                )
+        }
+    />
+);
 
 function RouterConfig({ history }) {
-  return (
-    <LocaleProvider locale={zhCN}>
-      <Router history={history}>
-        <Switch>
-          <Route sensitive path='/chart/:code' component={ChartDesigner}/>
-          <Route sensitive path='/dashboard/:id/' component={DashboardDesigner}/>
-          <Route path='/' component={MainLayout}/>
-        </Switch>
-      </Router>
-    </LocaleProvider>
-  );
+    return (
+        <LocaleProvider locale={zhCN}>
+            <Router history={history}>
+                <Switch>
+                    <PrivateRoute sensitive path='/chart/:code' component={ChartDesigner} />
+                    <PrivateRoute sensitive path='/dashboard/:id/' component={DashboardDesigner} />
+                    <Route sensitive path='/login/' component={Login} />
+                    <PrivateRoute path='/' component={MainLayout} />
+                </Switch>
+            </Router>
+        </LocaleProvider>
+    );
 }
 
 export default RouterConfig;