feat: add logout

client/actions/login.js

@@ -1,5 +1,6 @@
 import {
   LOGIN,
+  LOGIN_OUT,
   LOGIN_TYPE
 } from '../constants/action-types.js';
 import axios from 'axios';
@@ -42,6 +43,21 @@ const regActions = (data) => {
   }
 }
 
+const logoutActions = () => {
+  return(dispatch)=>{
+    axios.get('./user/logout').then((res) => {
+      console.log(res);
+      if(res.data.errcode === 0){
+        dispatch({
+          type: LOGIN_OUT
+        })
+      }
+    }).catch((err) => {
+      console.log(err);
+    })
+  }
+}
+
 const loginTypeAction = (index) => {
   return{
     type: LOGIN_TYPE,
@@ -52,5 +68,6 @@ const loginTypeAction = (index) => {
 export default {
   loginActions,
   regActions,
+  logoutActions,
   loginTypeAction
 }

client/components/Header/Header.js

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
 import { Link } from 'react-router-dom'
 import { Icon, Layout, Menu} from 'antd'
-import loginTypeAction from '../../actions/login';
+import { logoutActions, loginTypeAction} from '../../actions/login'
 
 const { Header } = Layout;
 const ToolUser = (props)=> (
@@ -12,13 +12,14 @@ const ToolUser = (props)=> (
     <li><Icon type="question-circle-o" />帮助</li>
     <li><Link to="/user" onClick={props.relieveLink}><Icon type="user" />{ props.user }</Link></li>
     <li><Link to="/News" onClick={props.relieveLink}><Icon type="mail" />{ props.msg }</Link></li>
-    <li>退出</li>
+    <li onClick={props.logout}>退出</li>
   </ul>
 );
 ToolUser.propTypes={
   user:PropTypes.string,
   msg:PropTypes.string,
-  relieveLink:PropTypes.func
+  relieveLink:PropTypes.func,
+  logout:PropTypes.func
 };
 
 const ToolGuest = ()=> (
@@ -38,16 +39,28 @@ class HeaderCom extends Component {
       current : window.location.hash.split("#")[1]
     }
   }
+  static propTypes ={
+    user: PropTypes.string,
+    msg: PropTypes.string,
+    login:PropTypes.bool,
+    relieveLink:PropTypes.func,
+    logoutActions:PropTypes.func,
+    loginTypeAction:PropTypes.func
+  }
   linkTo = (e) =>{
     this.setState({
       current : e.key
     })
   }
-  relieveLink = () =>{
+  relieveLink = () => {
     this.setState({
       current : ""
     })
   }
+  logout = (e) => {
+    e.preventDefault();
+    this.props.logoutActions();
+  }
   handleLogin = (e) => {
     e.preventDefault();
     this.props.loginTypeAction("1");
@@ -85,7 +98,7 @@ class HeaderCom extends Component {
                 </Menu.Item>
               </Menu>
               <div className="user-toolbar">
-                {login?<ToolUser user={user} msg={msg} relieveLink={this.relieveLink}/>:<ToolGuest/>}
+                {login?<ToolUser user={user} msg={msg} relieveLink={this.relieveLink} logout={this.logout}/>:<ToolGuest/>}
               </div>
             </div>
           </Header>
@@ -95,14 +108,6 @@ class HeaderCom extends Component {
   }
 }
 
-HeaderCom.propTypes={
-  user: PropTypes.string,
-  msg: PropTypes.string,
-  login:PropTypes.bool,
-  relieveLink:PropTypes.func,
-  loginTypeAction:PropTypes.func
-};
-
 export default connect(
   (state) => {
     return{
@@ -111,6 +116,9 @@ export default connect(
       login:state.login.isLogin
     }
   },
-  {loginTypeAction}
+  {
+    loginTypeAction,
+    logoutActions
+  }
 )(HeaderCom)
 

client/components/Header/Header.scss

@@ -74,7 +74,7 @@ $color-black-light : #404040;
         }
       }
       i{
-        margin-right: .09rem;
+        margin-right: .03rem;
       }
     }
   }

client/constants/action-types.js

@@ -17,6 +17,7 @@ export const REGISTER = 'REGISTER';
 
 //header
 export const LOGIN_TYPE = 'LOGIN_TYPE';
+export const LOGIN_OUT = 'LOGIN_OUT';
 
 //  News
 export const FETCH_NEWS_DATA = 'FETCH_NEWS_DATA';

client/reducer/Login/login.js

@@ -1,5 +1,6 @@
 import {
   LOGIN,
+  LOGIN_OUT,
   LOGIN_TYPE
 } from '../../constants/action-types';
 
@@ -20,6 +21,14 @@ export default (state = initialState, action) => {
         userName: action.payload.data.userName
       };
     }
+    case LOGIN_OUT: {
+      return{
+        ...state,
+        isLogin: false,
+        userName: null,
+        uid: null
+      }
+    }
     case LOGIN_TYPE: {
       return {
         ...state,