如何在vue原型上挂载组件

需求:以往我们对Token过期的处理是:直接跳转到登录页面,最近看到一个新的需求就是,当Token过期之后,将弹出一个框,在框里面进行输入账号密码进行二次登录。

解决办法:在使用vue的extend方法,在vue原型上进行挂载一个组件,来解决

1.先准备一个.Vue文件,其功能是做一个提示框,这里采用elementui里面提供的el-dialog

<template>
  <div>
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <span>这是一段信息</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    </div>
</template>
<script>
export default {
  name: 'LoginIndex',
  data () {
    return {
      dialogVisible: true
    }
  },
  methods: {
    handleClose (done) {
      this.$confirm('确认关闭？')
        .then((_) => {
          done()
        })
        .catch((_) => {})
    }
  }
}
</script>

组件准备好了,接着我们开始对这个组件进行挂载到原型上进行处理

这里我是新建了一个js文件,然后引入VUE实例和上面的.vue文件

import Vue from 'vue'
import dialog from '@/views/loginindex.vue'
function showDialog (options) {
  const Dialog = Vue.extend(dialog) // 返回一个vue子类
  // 创建实例并且挂载
  const app = new Dialog().$mount(document.createElement('div'))
  // 初始化参数
  for (const key in options) {
    app[key] = options[key]
  }
  // 将元素插入body中
  document.body.appendChild(app.$el)
}
Vue.prototype.$showDialog = showDialog // 将方法放在原型上。

紧接着将这个文件,引入到提供的main.js文件中

import '@/components/main'

然后这个组件就可以在任何一个Vue文件里面进行调用了

<template>
  <div class="id">
    <button @click="di">测试调用</button>
  </div>
</template>

<script>

export default {
  name: 'IndexView',
  methods: {
    di () {
      this.$showDialog()
    }
  }
}
</script>

<style lang="scss" scoped>

</style>

注意:此文章只是写了如何在Vue的原型上挂载一个组件,并未实现登录功能,具体实现登录功能就是将.vue里面的组件里面的内容改成一个form表单在里面即可.可以使用el-form即可.

具体实现步骤:可以选择在响应拦截器上对token过期进行处理.即在响应拦截器里面去调用这个Vue组就按实例

//先引入vue
import Vue from 'vue'
//引入axios
import axios from 'axios'
// 添加响应拦截器
// 添加响应拦截器
axios.interceptors.response.use(function (response) {
  return response.data
}, function (error) {
  if (error.response.data.code === 401) {
  //创建实例
    const vue = new Vue()
    //调用实例上的方法
    vue.$showDialog()
  }

  return Promise.reject(error)
})
//这样只要token过期,就会弹出这个框