src/App.vue

@@ -5,7 +5,16 @@
 </template>
 
 <script>
+import { getUserInfo } from '@/api/user.js'
+
 export default {
-  name: 'App'
+  name: 'App',
+  mounted() {
+    getUserInfo()
+      .then(res => {
+        localStorage.setItem('realname', res.data.realname)
+        localStorage.setItem('username', res.data.username)
+      })
+  }
 }
 </script>

src/layout/components/Navbar.vue

@@ -12,7 +12,7 @@
         </div>
         <el-dropdown-menu slot="dropdown" class="user-dropdown">
           <el-dropdown-item>
-            <span style="display:block;">{{ realname }}</span>
+            <span style="display:block;">{{ username }}</span>
           </el-dropdown-item>
           <router-link to="/">
             <el-dropdown-item divided>
@@ -52,7 +52,7 @@ export default {
       'sidebar',
       'avatar'
     ]),
-    realname() {
+    username() {
       return localStorage.getItem('realname')
     }
   },

src/layout/index.vue

@@ -14,7 +14,6 @@
 <script>
 import { Navbar, Sidebar, AppMain } from './components'
 import ResizeMixin from './mixin/ResizeHandler'
-import { getUserInfo } from '@/api/user.js'
 
 export default {
   name: 'Layout',
@@ -43,14 +42,6 @@ export default {
       }
     }
   },
-  mounted() {
-    getUserInfo()
-      .then(res => {
-        this.realname = res.data.realname
-        localStorage.setItem('realname', res.data.realname)
-        localStorage.setItem('username', res.data.username)
-      })
-  },
   methods: {
     handleClickOutside() {
       this.$store.dispatch('app/closeSideBar', { withoutAnimation: false })

src/views/home/index.vue

@@ -19,7 +19,7 @@
         <svg-icon icon-class="yonghu" />
         <el-dropdown style="color: #ffffff" @command="handleCommand">
           <span class="el-dropdown-link">
-            {{ realname }}<i class="el-icon-arrow-down el-icon--right" />
+            {{ username }}<i class="el-icon-arrow-down el-icon--right" />
           </span>
           <el-dropdown-menu slot="dropdown">
             <el-dropdown-item command="a">Log Out</el-dropdown-item>
@@ -241,7 +241,6 @@ img.img-arrow {
 
 <script>
 import FloatMenu from './floatMenu'
-import { getUserInfo } from '@/api/user.js'
 
 export default {
   components: {
@@ -252,11 +251,15 @@ export default {
       activeIndex2: '1',
       menuColor: 'transparent',
       processManage: true,
-      realname: '未登录',
       screenWidth: '100%',
       screenHeight: '1395pt'
     }
   },
+  computed: {
+    username() {
+      return localStorage.getItem('realname')
+    }
+  },
   mounted() {
     window.addEventListener('scroll', this.handleScroll, true)
     window.onresize = () => {
@@ -268,12 +271,6 @@ export default {
         }
       })()
     }
-    getUserInfo()
-      .then(res => {
-        this.realname = res.data.realname
-        localStorage.setItem('realname', res.data.realname)
-        localStorage.setItem('username', res.data.username)
-      })
   },
   methods: {
     handleSelect(key, keyPath) {