vue登录成功后导航栏获取不到用户信息

需求： 使用v-if判断localStorage(或sessionStorage)中是否存在用户信息来识别用户是否登录，进而更新导航栏上的用户信息
问题： 当登录请求完成后，数据已经存入localStorage中，但是v-if的条件值没有改变，仍然显示用户未登录
原因分析： 由于登录成功后马上跳转回主页，导致存localStorage操作与路由跳转几乎同时进行，所以跳转回主页后，localStorage还没有存入完成，获取不到用户信息
解决方法：
1.方法一： 在登陆成功后对跳转路由操作进行延时处理，添加如下代码：

setTimeout(() => { //延时0.5s跳转主页，用于主页获取localStorage中用户信息争取时间
   this.$router.push('/')
}, 500)

通过延时跳转为主页获取localStorage中用户信息争取时间即可解决
2. 方法二: 监听登录状态

由于登录页面属于App.vue的子组件，导航栏也属于App.vue的子组件，所以可以先将登录后的用户信息传到App.vue，再由App.vue将用户信息传到导航栏，导航栏监听用户信息，有变化时更新页面。

通过$emit事件将登陆后获取到的用户信息传给父组件App.vue

.then(res => {
	 if (res.code == 200) {
	     this.$message.success(res.msg);
	     sessionStorage.setItem('userInfo', JSON.stringify(res.data))
	     this.$emit('event', res.data); //将用信息传给UserPage用来更新状态栏
	     this.$router.push('/user/index');
     } else {
        this.$message.error(res.msg);
     }
})

在App.vue使用"@event=“getUserInfo”“接收用户信息，当App.vue获取到用户信息后通过”:user=“userInfo”"将数据传到导航栏

<template>
    <div id="user-page">
        <UserBar :user="userInfo"></UserBar>
        <div class="box">
            <router-view @event="getUserInfo"></router-view>
        </div>        
    </div>
</template>
<script>
import UserBar from '@/components/navbar/UserBar.vue'
export default {
    components: {
        UserBar,
    },
   data() {
      return {
        userInfo: {}
      }
   },
   methods: {
    getUserInfo(data) { //接收UserLogin传来的用户信息,默认回调参数data就是$emit中的第二个参数，当接收到时会触发标签上的@event事件
        this.userInfo = data
    }
   }
}
</script>

导航栏通过watch监听用户信息的变化，在接收到数据时会改变用户信息

<script>
export default {
    props: ['user'], //接收UserPage传来的用户信息
    data() {
        return {            
            active: '',           
            userInfo: this.userInfo = JSON.parse(sessionStorage.getItem('userInfo'))
        }
    },
    watch: {
        user: { //监听UserPage传来的用户信息，这个user就是通过props传来的user
            handler(newVal) {
                if(newVal==null) { //若发生改变，但最新的值为空，则到sessionStorage取值，若取不到则未登录
                    this.userInfo = JSON.parse(sessionStorage.getItem('userInfo'))
                } else {
                    this.userInfo = newVal //若发生改变，将最新的值赋给this.userInfo
                }
            }
        },
    }