🔨 Refactor: [前台]:不把用户信息缓存到localstore中，每次刷新页面都获取一次信息

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:

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 {

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
+    }
+  };
+};

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;