用户用户详情, 渲染头像

src/api/user.js

@@ -31,3 +31,10 @@ export function logout() {
   //   method: 'post'
   // })
 }
+
+export function getUserDetailInfoById(id) {
+  return request({
+    url: `/sys/user/${id}`,
+    method: 'GET'
+  })
+}

src/layout/components/Navbar.vue

@@ -11,7 +11,7 @@
     <div class="right-menu">
       <el-dropdown class="avatar-container" trigger="click">
         <div class="avatar-wrapper">
-          <img src="@/assets/common/bigUserHeader.png" class="user-avatar">
+          <img src="$store.getters.staffPhoto" class="user-avatar">
           <span class="name">{{ $store.getters.name }}</span>
           <i class="el-icon-caret-bottom" style="color:#fff" />
         </div>

src/store/getters.js

@@ -11,6 +11,8 @@ const getters = {
   sidebar: state => state.app.sidebar,
   device: state => state.app.device,
   token: state => state.user.token,
-  name: state => state.user.userInfo.username
+  name: state => state.user.userInfo.username,
+  staffPhoto: state => state.userInfo.staffPhoto
+
 }
 export default getters

src/store/modules/user.js

@@ -2,7 +2,7 @@
 import { getToken, setToken, removeToken } from '@/utils/auth'
 
 // 导入登录api
-import { getUserInfo, login } from '@/api/user'
+import { getUserInfo, login, getUserDetailInfoById } from '@/api/user'
 
 // import { resetRouter } from '@/router'
 
@@ -141,9 +141,15 @@ const actions = {
   },
   // 获取用户信息
   async getUserInfo({ commit }) {
-    const res = await getUserInfo()
+    // 获取简单用户信息, 包括用户id
-    commit('setUserInfo', res)
+    const simpleInfo = await getUserInfo()
-    return res
+    // 获取用户详细信息, 包括头像等
+    const detailInfo = await getUserDetailInfoById(simpleInfo.userId)
+    const totalInfo = {
+      ...simpleInfo, ...detailInfo
+    }
+    commit('setUserInfo', totalInfo)
+    return totalInfo
   }
 }