添加了修改头像功能，顺便重新设计了用户组件

src/components/UserControl/UserControl.js

@@ -1,3 +1,5 @@
+import { useEffect, useContext, Fragment } from 'react';
+
 import './userControl.css';
 import { images } from '../../resources.json';
 import { UserContext } from '../../helper/Context';
@@ -6,56 +8,89 @@ import { get } from '../../helper/axios';
 import { apis } from '../../helper/apis';
 import { alert } from '../../helper/alert';
 import History from '../../helper/history';
+import AvatarUnit from '../AvatarUnit/AvatarUnit';
+
+const exitContent = ['登录', '退出', '退出审核'];
+// page level: 0: everyone, 1: login needed, 2: admin only
+export default function UserControl({ pageAuthLevel, buttonOnly }) {
+  const { userData, setUserData } = useContext(UserContext);
+  useEffect(() => {
+    if (userData.role === -1) return;
+    if (userData.role === 0 && localStorage.getItem('jwt')) {
+      // 没有用户信息，但是有登录信息
+      setUserData({ role: -1, name: '加载中' });
+      get(apis.getProfile).then(({ data, status, networkStatus }) => {
+        if (networkStatus !== 200) return;
+        if (!status) return alert('获取用户信息失败：' + data + '，请稍候刷新再试');
+        setUserData({
+          name: data.realName,
+          role: data.role,
+          avatar: data.avatar,
+        });
+      });
+      return;
+    }
+
+    if (userData.role < pageAuthLevel) {
+      // 用户权限不足，依照页面权限跳转
+      if (userData.role === 1) {
+        History.force('/');
+        alert('您没有权限访问该页面，退出登录后可以使用有权限的账号登录');
+        return;
+      }
+      History.force('/login');
+    }
+
+  }, [pageAuthLevel, setUserData, userData]);
 
-export default function UserControl(props) {
   return (
     <UserContext.Consumer>
       {({ userData, setUserData }) => (
-        userData.role === 2
-        ? (
-          <div className="user">
-            <button
-              className="btn btn-hollow btn-straight"
-              onClick={() => {
-                localStorage.setItem('jwt', '');
-                setUserData({ role: -1, name: '' });
-                History.force('/login');
-              }}
-            >退出审核</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 && History.getHref().match(/^\/admin.*/))
-                  History.force('/');
-                if (userData.role !== -1 || !localStorage.getItem('jwt')) 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>
-        )
+        <div className="user">
+          {buttonOnly || (
+            <Fragment>
+              {
+                userData.role === -1
+                ? (
+                  <Spinner isGray />
+                )
+                : userData.role > 0 && (
+                  <AvatarUnit
+                    avatar={userData.avatar || images.avatar}
+                    onChangeAvatar={url => setUserData({ ...userData, avatar: url })}
+                    showTip={!userData.avatar}
+                  />
+                )
+              }
+              {
+                userData.role !== 0 && (
+                  <div className="user-name">{userData.name}</div>
+                )
+              }
+            </Fragment>
+          )}
+          {
+            userData.role === pageAuthLevel
+            ? (
+              <button
+                className="btn btn-hollow btn-straight"
+                onClick={() => {
+                  localStorage.setItem('jwt', '');
+                  setUserData({ role: 0, name: '' });
+                  History.force('/login');
+                }}
+              >{exitContent[pageAuthLevel]}</button>
+            )
+            : userData.role === 2 && (
+              <button
+                className="btn btn-hollow btn-straight"
+                onClick={() => {
+                  History.push('/admin/review');
+                }}
+              >进入审核</button>
+            )
+          }
+        </div>
       )}
     </UserContext.Consumer>
   );

src/components/UserControl/userControl.css

@@ -4,16 +4,5 @@
   height: 50px;
   line-height: 50px;
   color: white;
-  margin-left: 10px;
+  margin: 0 10px;
 }
-
-.user-avatar {
-  width: 40px;
-  height: 40px;
-}
-
-.user-avatar > img {
-  border-radius: 50%;
-  width: 100%;
-  height: 100%;
-}