From f70396e4aae3a54020e44f0f1f153bf0d00a4a5f Mon Sep 17 00:00:00 2001 From: fanxb Date: Tue, 30 Jul 2019 16:23:09 +0800 Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A8=20Refactor:=20[=E5=89=8D=E5=8F=B0]?= =?UTF-8?q?:=E4=B8=8D=E6=8A=8A=E7=94=A8=E6=88=B7=E4=BF=A1=E6=81=AF?= =?UTF-8?q?=E7=BC=93=E5=AD=98=E5=88=B0localstore=E4=B8=AD=EF=BC=8C?= =?UTF-8?q?=E6=AF=8F=E6=AC=A1=E5=88=B7=E6=96=B0=E9=A1=B5=E9=9D=A2=E9=83=BD?= =?UTF-8?q?=E8=8E=B7=E5=8F=96=E4=B8=80=E6=AC=A1=E4=BF=A1=E6=81=AF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- front/src/layout/MainLayout/index.jsx | 18 +++++---- front/src/pages/public/Login/index.jsx | 9 ++--- front/src/redux/action/LoginInfoAction.js | 49 ++++++++++++++++++++--- front/src/redux/reducer/loginInfo.js | 24 ++--------- 4 files changed, 60 insertions(+), 40 deletions(-) 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;