完成强制跳转登录页面、完成用户信息存储

src/components/UserControl/UserControl.js

@@ -0,0 +1,53 @@
+import './userControl.css';
+import { images } from '../../resources.json';
+import { UserContext } from '../../helper/Context';
+import Spinner from '../Spinner/Spinner';
+import { get } from '../../helper/axios';
+import { apis } from '../../helper/apis';
+import { alert } from '../../helper/alert';
+
+export default function UserControl(props) {
+  return (
+    <UserContext.Consumer>
+      {({ userData, setUserData }) => (
+        userData.role === 2
+        ? (
+          <div className="user">
+            <button
+              className="btn btn-hollow btn-straight"
+              onClick={() => setUserData({ role: -1, name: '' })}
+            >退出审核</button>
+          </div>
+        ) : (
+          <div className="user">
+            {
+              userData.role === -1
+              ? (
+                <Spinner />
+              ) : (
+                <div className="user-avatar">
+                  <img src={images.avatar} alt="user avatar" />
+                </div>
+              )
+            }
+            <div className="user-name">{userData.name || "加载中"}</div>
+            {
+              (() => {
+                if (userData.role !== -1) return null;
+                get(apis.getProfile).then(({ data, status, networkStatus }) => {
+                  if (networkStatus !== 200) return;
+                  if (!status) return alert('获取用户信息失败：' + data + '，请稍候刷新再试');
+                  setUserData({
+                    name: data.realName,
+                    role: data.role
+                  });
+                });
+                return null;
+              })()
+            }
+          </div>
+        )
+      )}
+    </UserContext.Consumer>
+  );
+}

src/components/UserControl/userControl.css

@@ -0,0 +1,19 @@
+.user-name {
+  height: 100%;
+  font-size: 18px;
+  height: 50px;
+  line-height: 50px;
+  color: white;
+  margin-left: 10px;
+}
+
+.user-avatar {
+  width: 40px;
+  height: 40px;
+}
+
+.user-avatar > img {
+  border-radius: 50%;
+  width: 100%;
+  height: 100%;
+}