VueJS实现鉴权请求触发全局登录模态框的最佳方法

推荐优先使用Vue插件+Axios全局拦截器的方案实现需求，比Mixin复用性更强，不需要每个页面单独引入即可全局调用。

第一步：实现鉴权插件 #

import ModalLogin from '../../components/ModalLogin';
import Vue from 'vue'
import axios from 'axios'

const AuthPlugin = {
  install(Vue) {
    // 实例化登录模态框并插入到全局DOM
    const ModalLoginClass = Vue.extend(ModalLogin)
    const loginModal = new ModalLoginClass()
    loginModal.$mount()
    document.body.appendChild(loginModal.$el)

    // 挂载全局调用方法
    Vue.prototype.$showLoginModal = () => loginModal.show()

    // 全局Axios请求拦截：自动携带JWT
    axios.interceptors.request.use(
      config => {
        const jwt = localStorage.getItem('jwt')
        if (jwt) config.headers.Authorization = `Bearer ${jwt}`
        return config
      },
      error => Promise.reject(error)
    )

    // 全局Axios响应拦截：统一处理鉴权失败
    axios.interceptors.response.use(
      response => response,
      error => {
        if (error.response?.status === 401) {
          // 未授权时自动弹出登录框
          Vue.prototype.$showLoginModal()
          // 清理本地无效登录信息
          localStorage.removeItem('user')
          localStorage.removeItem('jwt')
        }
        return Promise.reject(error)
      }
    )
  }
}

export default AuthPlugin

第二步：全局注册插件 #

在项目入口main.js中注册插件：

import AuthPlugin from './utils/auth' // 替换为你的插件实际路径
Vue.use(AuthPlugin)

原有Mixin方案的修正 #

如果你仍然要使用Mixin实现，修正原有代码问题后的版本如下：

import ModalLogin from '../../components/ModalLogin';
import Vue from 'vue'

export default {
  data() {
    return {
      loginModalInstance: null
    }
  },
  methods: { 
    async authorizedGet(url, config = {}) {
      if(!localStorage.getItem('user')) {
        this.instantiateModal()
        this.loginModalInstance.show()
        // 可选扩展：监听登录成功事件后自动重发请求
        return new Promise((resolve) => {
          this.loginModalInstance.$once('login-success', () => {
            resolve(this.$axios.get(url, config))
          })
        })
      }
      return this.$axios.get(url, config)
    },
    instantiateModal() {
      // 避免重复实例化
      if (this.loginModalInstance) return
      const ModalLoginClass = Vue.extend(ModalLogin)
      this.loginModalInstance = new ModalLoginClass()
      this.loginModalInstance.$mount()
      // 插入到全局DOM中
      document.body.appendChild(this.loginModalInstance.$el)
      // 组件销毁时自动清理模态框
      this.$once('hook:beforeDestroy', () => {
        this.loginModalInstance.$destroy()
        document.body.removeChild(this.loginModalInstance.$el)
      })
    }
  }
}

注意事项 #

• 你的ModalLogin组件需要对外暴露show方法，内部通过v-show/v-if控制模态框的显示状态
• 插件方案下所有Axios请求都会自动处理JWT携带和鉴权失败逻辑，不需要单独封装authorizedGet类方法
• 用户登录成功后可以通过this.$emit('login-success')触发回调事件，实现登录后自动重发之前失败的请求

内容的提问来源于stack exchange，提问作者Florent06