fix: 修复未登录时的路由地址未改变

client/Application.js

@@ -1,19 +1,26 @@
 import React, { Component } from 'react'
 import { connect } from 'react-redux'
 import PropTypes from 'prop-types'
-import { Route, HashRouter, Redirect, Switch } from 'react-router-dom'
+import { Route, HashRouter } from 'react-router-dom'
 import { Home, ProjectGroups, Interface, News, AddInterface } from './containers/index'
 import User from './containers/User/User.js'
 import Header from './components/Header/Header'
 import { checkLoginState } from './actions/login'
+import { requireAuthentication } from './components/AuthenticatedComponent';
 
 const LOADING_STATUS = 0;
-const GUEST_STATUS = 1;
-// const MEMBER_STATUS = 2;
-
-
-class App extends Component {
 
+@connect(
+  state => {
+    return{
+      loginState:state.login.loginState
+    }
+  },
+  {
+    checkLoginState
+  }
+)
+export default class App extends Component {
   constructor(props) {
     super(props);
     this.state = {
@@ -24,59 +31,32 @@ class App extends Component {
     checkLoginState:PropTypes.func,
     loginState:PropTypes.number
   }
+
+  componentDidMount() {
+    this.props.checkLoginState();
+  }
   route = (status) => {
     let r;
     if (status === LOADING_STATUS) {
       return <span>loading...</span>
-    } else if (status === GUEST_STATUS) {
-      r = (
-        <HashRouter>
-          <div className="router-main">
-            <Header />
-            <Switch>
-              <Route
-                path="/"
-                component={Home}/>
-              <Redirect from="(/:str)" to="/" />
-            </Switch>
-          </div>
-        </HashRouter>
-      )
     } else {
       r = (
         <HashRouter>
           <div className="router-main">
             <Header />
             <Route path="/" component={Home} exact />
-            <Route path="/ProjectGroups" component={ProjectGroups} />
-            <Route path="/Interface" component={Interface} />
-            <Route path="/user" component={User} />
-            <Route path="/News" component={News} />
-            <Route path="/AddInterface" component={ AddInterface } />
+            <Route path="/ProjectGroups" component={requireAuthentication(ProjectGroups)} />
+            <Route path="/Interface" component={requireAuthentication(Interface)} />
+            <Route path="/user" component={requireAuthentication(User)} />
+            <Route path="/News" component={requireAuthentication(News)} />
+            <Route path="/AddInterface" component={ requireAuthentication(AddInterface) } />
           </div>
         </HashRouter>
       )
     }
     return r
-
   }
-
-  componentDidMount() {
-    this.props.checkLoginState();
-  }
-
   render() {
-    return this.route(this.props.loginState)
+    return this.route(this.props.loginState);
   }
 }
-
-export default connect(
-  state => {
-    return{
-      loginState:state.login.loginState
-    }
-  },
-  {
-    checkLoginState
-  }
-)(App)

client/components/AuthenticatedComponent.js

@@ -0,0 +1,55 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import PropTypes from 'prop-types'
+import { changeMenuItem } from '../actions/menu'
+
+
+export function requireAuthentication(Component) {
+  class AuthenticatedComponent extends React.Component {
+    constructor(props){
+      super(props);
+    }
+    static propTypes ={
+      isAuthenticated : PropTypes.bool,
+      location: PropTypes.object,
+      dispatch: PropTypes.func,
+      history: PropTypes.object,
+      changeMenuItem:PropTypes.func
+    }
+    componentWillMount() {
+      this.checkAuth();
+    }
+    componentWillReceiveProps() {
+      this.checkAuth();
+    }
+    checkAuth() {
+      if( !this.props.isAuthenticated ){
+        this.props.history.push('/');
+        this.props.changeMenuItem('/');
+      }
+    }
+    render() {
+      return (
+        <div>
+          {this.props.isAuthenticated
+            ? <Component {...this.props}/>
+            : null
+          }
+        </div>
+      )
+
+    }
+  }
+  return connect(
+    (state) => {
+      return{
+        isAuthenticated: state.login.isLogin
+      }
+    },
+    {
+      changeMenuItem
+    }
+  )(AuthenticatedComponent);
+}
+
+

client/components/Header/Header.js

@@ -85,16 +85,9 @@ class HeaderCom extends Component {
   }
   linkTo = (e) =>{
     this.props.changeMenuItem(e.key);
-    // this.props.curKey = e.key;
-    // this.setState({
-    //   current : e.key
-    // })
   }
   relieveLink = () => {
     this.props.changeMenuItem("");
-    // this.setState({
-    //   current : ""
-    // })
   }
   logout = (e) => {
     e.preventDefault();
@@ -129,9 +122,10 @@ class HeaderCom extends Component {
   }
   render () {
     const { login, user, msg, uid, curKey } = this.props;
+    console.log(curKey);
     return (
       <acticle className="header-box">
-        <Layout className="'layout">
+        <Layout className="layout">
           <Header>
             <div className="content">
               <div className="logo">

client/reducer/menu/menu.js

@@ -3,7 +3,7 @@ import {
 } from '../../constants/action-types.js'
 
 const initialState = {
-  curKey: window.location.hash.split("#")[1]
+  curKey: window.location.hash.split("#")[1] || '/'
 }
 
 export default (state = initialState, action) => {