Vue 注册全局登录组件

一，使用 UI 框架构建登录弹窗如下

• 新建 loginDialog 目录

• 新建登录弹窗组件 loginDialog/index.vue

  

二，挂载登录弹窗到 body

• 新建 loginDialog/index.js ，代码如下：

  import Vue from 'vue'
  import LoginDialog from './index.vue'
  
  const loginDialog = new Vue(LoginDialog)
  loginDialog.$mount(document.createElement('div'))
  
  // 挂载到 body 上
  document.body.appendChild(loginDialog.$el)
  
  Vue.prototype.$loginDialog = loginDialog
  export default loginDialog
  

三，在 main.js 中引入登录组件

// main.js

new Vue({
    el: '#app',
    router,
    store,
    mounted() {
        // 在 DOM 渲染完成后，再挂载登录弹窗
        // 避免 Touch-Vue 报错
        require('@/components/login/loginDialog/index.js')
    },
    render: (h) => h(App)
})

四，新建自定义指令，判断是否登录

在用户操作前，判断其是否登录。未登录则显示登录弹窗

• 在 src 下新建 directive 目录，用于存放自定义指令

• 在 directive/index.js 下新建全局自定义指令。代码如下：

  import Vue from 'vue'
  import store from '@/store'
  
  Vue.directive('login', {
      bind: function(el) {
          // true能优先触发事件
          el.addEventListener('click', checkLogin, true)
      }
  })
  
  function checkLogin(e) {
      // 未登录
      if (!store.getters.isLogin) {
          // 用于取消所有后续事件捕获或事件冒泡，并阻止调用任何后续事件处理程序
          e.stopImmediatePropagation()
  
          Vue.prototype.$loginDialog.open() // 打开登录弹窗
      }
  }
  

• 在需要登录鉴权的节点上，增加 v-login 指令

  <to-button type="base" v-login @click="handleSubmit">提交</to-button>
  

  点击提交按钮后，如已登录则调用 handleSubmit 方法 若未登录，则拉起登录弹窗