Fix user menu bug

src/components/Tools/UserMenu.vue

@@ -18,12 +18,16 @@
     </a>
     <header-comment class="action" />
     <a-dropdown>
-      <span class="action ant-dropdown-link user-dropdown-menu">
+      <span
+        class="action ant-dropdown-link user-dropdown-menu"
+        v-if="user"
+      >
         <a-avatar
           class="avatar"
           size="small"
-          :src="avatar"
+          :src="user.avatar"
         />
+        {{ user.nickname }}
       </span>
       <a-menu
         slot="overlay"
@@ -55,7 +59,6 @@
 import HeaderComment from './HeaderComment'
 import SettingDrawer from '@/components/SettingDrawer/SettingDrawer'
 import { mapActions, mapGetters } from 'vuex'
-import userApi from '@/api/user'
 import optionApi from '@/api/option'
 
 export default {
@@ -67,7 +70,6 @@ export default {
   data() {
     return {
       optionVisible: true,
-      user: {},
       options: [],
       keys: ['blog_url']
     }
@@ -76,11 +78,10 @@ export default {
     this.optionVisible = this.$refs.drawer.visible
   },
   created() {
-    this.loadUser()
     this.loadOptions()
   },
   computed: {
-    ...mapGetters(['nickname', 'avatar'])
+    ...mapGetters(['user'])
   },
   methods: {
     ...mapActions(['logout']),
@@ -110,11 +111,6 @@ export default {
       this.optionVisible = this.$refs.drawer.visible
       this.$refs.drawer.toggle()
     },
-    loadUser() {
-      userApi.getProfile().then(response => {
-        this.user = response.data.data
-      })
-    },
     loadOptions() {
       optionApi.listAll(this.keys).then(response => {
         this.options = response.data.data
@@ -123,3 +119,9 @@ export default {
   }
 }
 </script>
+
+<style lang="less" scoped>
+.avatar {
+  margin-right: 0.3rem;
+}
+</style>

src/core/bootstrap.js

@@ -9,7 +9,8 @@ import {
   DEFAULT_FIXED_HEADER,
   DEFAULT_FIXED_HEADER_HIDDEN,
   DEFAULT_FIXED_SIDEMENU,
-  DEFAULT_CONTENT_WIDTH_TYPE
+  DEFAULT_CONTENT_WIDTH_TYPE,
+  USER
 } from '@/store/mutation-types'
 import config from '@/config/defaultSettings'
 
@@ -23,6 +24,7 @@ export default function Initializer() {
   store.commit('TOGGLE_FIXED_HEADER_HIDDEN', Vue.ls.get(DEFAULT_FIXED_HEADER_HIDDEN, config.autoHideHeader))
   store.commit('TOGGLE_COLOR', Vue.ls.get(DEFAULT_COLOR, config.primaryColor))
   store.commit('SET_TOKEN', Vue.ls.get(ACCESS_TOKEN))
+  store.commit('SET_USER', Vue.ls.get(USER))
 
   // last step
 }

src/store/getters.js

@@ -3,6 +3,7 @@ const getters = {
   theme: state => state.app.theme,
   color: state => state.app.color,
   token: state => state.user.token,
+  user: state => state.user.user,
   avatar: state => state.user.avatar,
   nickname: state => state.user.name,
   roles: state => state.user.roles,

src/store/modules/user.js

@@ -1,6 +1,7 @@
 import Vue from 'vue'
-import { ACCESS_TOKEN } from '@/store/mutation-types'
+import { ACCESS_TOKEN, USER } from '@/store/mutation-types'
 import adminApi from '@/api/admin'
+import userApi from '@/api/user'
 
 const user = {
   state: {
@@ -8,7 +9,8 @@ const user = {
     name: '',
     avatar: '',
     roles: [],
-    info: {}
+    info: {},
+    user: {}
   },
   mutations: {
     SET_TOKEN: (state, token) => {
@@ -30,9 +32,26 @@ const user = {
     CLEAR_TOKEN: state => {
       Vue.ls.remove(ACCESS_TOKEN)
       state.token = null
+    },
+    SET_USER: (state, user) => {
+      Vue.ls.set(USER, user)
+      state.user = user
     }
   },
   actions: {
+    loadUser({ commit }) {
+      return Promise((resolve, reject) => {
+        userApi
+          .getProfile()
+          .then(response => {
+            commit('SET_USER', response.data.data)
+            resolve(response)
+          })
+          .catch(error => {
+            reject(error)
+          })
+      })
+    },
     login({ commit }, { username, password }) {
       return new Promise((resolve, reject) => {
         adminApi

src/store/mutation-types.js

@@ -7,6 +7,7 @@ export const DEFAULT_FIXED_HEADER = 'DEFAULT_FIXED_HEADER'
 export const DEFAULT_FIXED_SIDEMENU = 'DEFAULT_FIXED_SIDEMENU'
 export const DEFAULT_FIXED_HEADER_HIDDEN = 'DEFAULT_FIXED_HEADER_HIDDEN'
 export const DEFAULT_CONTENT_WIDTH_TYPE = 'DEFAULT_CONTENT_WIDTH_TYPE'
+export const USER = 'USER'
 
 export const CONTENT_WIDTH_TYPE = {
   Fluid: 'Fluid',

src/views/user/Login.vue

@@ -64,7 +64,7 @@ export default {
     }
   },
   methods: {
-    ...mapActions(['login']),
+    ...mapActions(['login', 'loadUser']),
     handleLogin() {
       if (!this.username) {
         this.$message.warn('用户名不能为空')
@@ -82,6 +82,8 @@ export default {
       })
     },
     loginSuccess() {
+      // Cache the user info
+      this.loadUser()
       if (this.$route.query.redirect) {
         this.$router.replace(this.$route.query.redirect)
       } else {
@@ -104,7 +106,7 @@ body {
   margin: -160px 0 0 -160px;
   width: 320px;
   padding: 16px 32px 32px 32px;
-  box-shadow: -4px 7px 46px 2px rgba(0,0,0,.1);
+  box-shadow: -4px 7px 46px 2px rgba(0, 0, 0, 0.1);
 }
 .loginLogo {
   margin-bottom: 20px;

src/views/user/Profile.vue

@@ -181,7 +181,7 @@ export default {
     this.loadOptions()
   },
   methods: {
-    ...mapMutations({ setAvatar: 'SET_AVATAR' }),
+    ...mapMutations({ setUser: 'SET_USER' }),
     handleShowAttachDrawer() {
       this.attachmentDrawerVisible = true
     },
@@ -214,7 +214,7 @@ export default {
     handleUpdateProfile() {
       userApi.updateProfile(this.user).then(response => {
         this.user = response.data.data
-        this.setAvatar(this.user.avatar)
+        this.setUser(Object.assign({}, this.user))
         this.$message.success('资料更新成功！')
       })
     },