刷新页面和事件处理的问题（$ emit和$ on）

Question

我在我的代码中使用了EventBus，因此我可以根据已登录的用户管理导航栏的更改方式，如果他是管理员，导航栏将具有更多功能。

事实是，当我登录时，登录组件发出带有$ emit的内容，此事件由另一个组件（即导航栏）接收。

这很好，如果他已经登录并且他是管理员，他会在导航栏中有更多的东西可以与之交互，但是当我刷新页面就像事件消失了，导航栏的工作方式就像没有人登录一样。

非常感谢你！

Login.vue

我在用户登录时调用这些方法，同时也是管理员。

emitMethod () {
      EventBus.$emit('logged-in', 'loggedin')
    },
adminMethod () {
      EventBus.$emit('isadmin', 'isadmin')
    }

Navbar.vue

导航栏选项'用户'

<li v-if="auth=='loggedin' && admin=='isadmin'" class="nav-item">
                    <router-link class="nav-link" to="/users">Users</router-link>
</li>

这是发出事件的login（）方法

login () {
      axios.post('signin', {
        email: this.email,
        password: this.password
      }).then(res => {
        localStorage.setItem('usertoken', res.data.token)
        const token = localStorage.usertoken
        const decoded = jwtDecode(token)
        this.admin = decoded.sub.isAdmin
        console.log('¿Es admin? ' + this.admin)
        this.email = ''
        this.password = ''
        //alert('Logueado correctamente')
        this.emitMethod()
        if (this.admin === true) {
          this.adminMethod()
        }
        router.push({ name: 'Profile' })

      }).catch(err => {
        this.password = ''
        alert('Usuario o contraseña incorrectos')
        console.log(err)
      })
    },
    emitMethod () {
      EventBus.$emit('logged-in', 'loggedin')
    },
    adminMethod () {
      EventBus.$emit('isadmin', 'isadmin')
    }
  }

这是组件Navbar.vue的脚本部分

export default {
  data () {
    return {
      auth: '',
      user: '',
      admin: '',
      users: ''
    }
  },

  methods: {
    logout () {
      localStorage.removeItem('usertoken')
    }
  },

  mounted () {
    EventBus.$on('logged-in', status => {
      this.auth = status
    })
    EventBus.$on('isadmin', status => {
      this.admin = status
    })
  }
}

Answer 1

刷新页面时，将重置所有组件并再次从初始状态开始。您需要检测用户是否在Login.vue初始化中登录并发出事件或将一些道具传递给Navbar组件，该组件将通知用户已登录。

Answer 2

考虑您已登录并重定向到主管理页面。在你的代码中你编写的函数只在Login.vue中点击登录按钮时触发事件。但是在刷新页面后登录过程并重定向到管理主页后，当前页面中没有$ emit事件（EventBus.$emit('logged-in', 'loggedin')）。这就是为什么如果有人登录你的Navbar无法获取的原因。

每次刷新页面时都必须检查用户是否登录，并在检查后发出$ emit登录事件。然后你的程序将按你的意愿工作