diff --git a/front/src/layout/MainLayout/index.jsx b/front/src/layout/MainLayout/index.jsx index f02dbeb..c01c082 100644 --- a/front/src/layout/MainLayout/index.jsx +++ b/front/src/layout/MainLayout/index.jsx @@ -1,17 +1,19 @@ import React from "react"; import { Link, withRouter } from "react-router-dom"; import { Menu, Dropdown, Divider } from "antd"; +import httpUtil from "../../util/httpUtil"; import { connect } from "react-redux"; import styles from "./index.module.less"; -import { changeLoginInfo, DATA_NAME } from "../../redux/action/LoginInfoAction"; +import * as infoAction from "../../redux/action/LoginInfoAction"; function mapStateToProps(state) { - return state[DATA_NAME]; + return state[infoAction.DATA_NAME]; } function mapDispatchToProps(dispatch) { return { - updateLoginInfo: (token, userInfo) => dispatch(changeLoginInfo(token, userInfo)) + logout: () => dispatch(infoAction.logout()), + changeUserInfo: userInfo => dispatch(infoAction.changeUserInfo(userInfo)) }; } @@ -22,6 +24,10 @@ class MainLayout extends React.Component { this.state = {}; } + componentWillMount() { + httpUtil.get("/user/currentUserInfo").then(res => this.props.changeUserInfo(res)); + } + renderUserArea() { const { userInfo } = this.props; const menu = ( @@ -50,11 +56,7 @@ class MainLayout extends React.Component { const { history } = this.props; switch (e.key) { case "logout": - this.props.updateLoginInfo(null, null); - localStorage.removeItem("token"); - localStorage.removeItem("userInfo"); - delete window.token; - delete window.userInfo; + this.props.logout(); history.replace("/"); break; default: diff --git a/front/src/pages/public/Login/index.jsx b/front/src/pages/public/Login/index.jsx index 75a05c4..62250f5 100644 --- a/front/src/pages/public/Login/index.jsx +++ b/front/src/pages/public/Login/index.jsx @@ -5,7 +5,7 @@ import { Button, Input, message, Checkbox } from "antd"; import IconFont from "../../../components/IconFont"; import styles from "./index.module.less"; import { connect } from "react-redux"; -import { changeLoginInfo, DATA_NAME } from "../../../redux/action/LoginInfoAction.js"; +import { changeToken, DATA_NAME } from "../../../redux/action/LoginInfoAction.js"; import axios from "../../../util/httpUtil"; import { LoginLayout, LOGIN_TYPE } from "../../../layout/LoginLayout"; @@ -15,7 +15,7 @@ function mapStateToProps(state) { function mapDispatchToProps(dispatch) { return { - updateLoginInfo: (token, userInfo) => dispatch(changeLoginInfo(token, userInfo)) + updateToken: token => dispatch(changeToken(token)) }; } @@ -45,11 +45,8 @@ class Login extends Component { const token = res.token; delete res.token; localStorage.setItem("token", token); - localStorage.setItem("userInfo", JSON.stringify(res)); window.token = token; - window.userInfo = res; - message.success("登录成功"); - this.props.updateLoginInfo(token, res); + this.props.updateToken(token); if (this.query.redirect) { this.props.history.replace(decodeURIComponent(this.query.redirect)); } else { diff --git a/front/src/redux/action/LoginInfoAction.js b/front/src/redux/action/LoginInfoAction.js index 8462515..fb73854 100644 --- a/front/src/redux/action/LoginInfoAction.js +++ b/front/src/redux/action/LoginInfoAction.js @@ -1,15 +1,52 @@ // 定义登录信息在store中的名字 export const DATA_NAME = "loginInfo"; -//定义修改loginInfo type -export const CHANGE_LOGIN_INFO = "changeLoginStatus"; - -export const changeLoginInfo = (token, userInfo) => { +export function getInitData() { + let token = localStorage.getItem("token"); + window.token = token; return { - type: CHANGE_LOGIN_INFO, + token, + userInfo: null + }; +} + +//定义修改token +export const CHANGE_TOKEN = "changeToken"; + +export const changeToken = token => { + localStorage.setItem("token", token); + window.token = token; + return { + type: CHANGE_TOKEN, + data: { + token + } + }; +}; + +//定义修改userInfo +export const CHANGE_USER_INFO = "changeUserInfo"; + +export const changeUserInfo = userInfo => { + return { + type: CHANGE_USER_INFO, data: { - token, userInfo } }; }; + +// 退出登录 +export const LOGOUT = "logout"; + +export const logout = () => { + delete window.token; + localStorage.removeItem("token"); + return { + type: LOGOUT, + data: { + token: null, + userInfo: null + } + }; +}; diff --git a/front/src/redux/reducer/loginInfo.js b/front/src/redux/reducer/loginInfo.js index f41f319..ad3d39f 100644 --- a/front/src/redux/reducer/loginInfo.js +++ b/front/src/redux/reducer/loginInfo.js @@ -1,26 +1,10 @@ import * as loginAction from "../action/LoginInfoAction.js"; -function getInitData() { - let token, userInfo; - try { - token = localStorage.getItem("token"); - userInfo = JSON.parse(localStorage.getItem("userInfo")); - } catch (e) { - console.error(e); - token = null; - userInfo = null; - } - window.token = token; - window.userInfo = userInfo; - return { - token, - userInfo - }; -} - -const LoginStatusReducer = (state = getInitData(), action) => { +const LoginStatusReducer = (state = loginAction.getInitData(), action) => { switch (action.type) { - case loginAction.CHANGE_LOGIN_INFO: + case loginAction.CHANGE_TOKEN: + case loginAction.CHANGE_USER_INFO: + case loginAction.LOGOUT: return { ...state, ...action.data }; default: return state;