vue实现全局登录

1.需求分析

目前登录层在myheader组件里面，登录按钮也在同一个组件里面，我们点击登录，调用showLogin()方法即可

目前的问题是，我们在另外一个页面，选择某些操作时我们需要判断当前是否登录，如果登录可以进入下一个页面；如果没有登录需要显示登录层，那么这个问题怎么解决呢，我们不能直接调用头部登录方法，我们目前的组件是包含在nuxt里面的

问题总是能够解决的，其实很简单，我们可以注册一个全局登录事件，当需要登录层是，我们发送一个登录事件，头部监听登录事件，然后我们触发登录按钮的点击事件即可打开登录层。

2.代码实现

2.1 修改myheader.vue

引入vue

import Vue from 'vue'

注册与监听事件

  mounted() {
    // 注册全局登录事件对象
    window.loginEvent = new Vue();
    // 监听登录事件
    loginEvent.$on('loginDialogEvent', function () {
    document.getElementById("loginDialog").click();
      })
    // 触发事件，显示登录层：loginEvent.$emit('loginDialogEvent')
  }

2.2 修改_hoscode.vue页面

引入cookie

import cookie from 'js-cookie'

修改方法进行判断是否登录

    schedule(){
      // 登录判断
      let token = cookie.get('token')
      if (!token) {
        loginEvent.$emit('loginDialogEvent')
        return
      }
      window.location.href = url
      }
    },