如何在 main.js Vue 3 中使用 Sweetalert

Question

我正在学习 Vue 3，在 app.js 中使用 SweetAlert2 时遇到了一些麻烦。

当我在组件 Vue 中使用 SweetAlert2 但在 app.js 中不起作用时，一切正常并且有效

我的目标： 我想在收到未经身份验证的错误响应时显示带有确认按钮的警报。从 axios 拦截器并将用户重定向到登录页面

应用程序.js

import {createApp} from 'vue'
require('./bootstrap')
import App from './App.vue'
import axios from 'axios'
import router from './router'
import store from './store'

// SweetAlert2
import VueSweetalert2 from 'vue-sweetalert2';
import 'sweetalert2/dist/sweetalert2.min.css';

axios.interceptors.response.use(function (response) {
    return response
}, function (error) {
    console.log(error.response.data.message)
    if (error.response.data.message === 'Unauthenticated.') {
        swal({
            title: "Session Expired",
            text: "Your session has expired. Would you like to be redirected to the login page?",
            icon: "warning",
            showCancelButton: true,
            confirmButtonColor: "#DD6B55",
            confirmButtonText: "Yes",
            closeOnConfirm: false
        }).then((result) => {
            if (result.value) {
                window.location.href = "/login"
            }
        });     
}
    return Promise.reject(error)
})

const app = createApp(App)
app.config.globalProperties.$axios = axios;
app.use(router)
app.use(VueSweetalert2)
app.use(store)
app.mount('#app')

当我用这个改变错误响应时它工作，（但对我来说不是这样优雅）

...
axios.interceptors.response.use(function (response) {
        return response
    }, function (error) {
        console.log(error.response.data.message)
        if (error.response.data.message === 'Unauthenticated.') {
            alert('Session Expired');
            window.location.href = "/login"
    }
        return Promise.reject(error)
    })
...

我认为如果使用 sweetalert 会很好，

谢谢你...

Answer 1

解释

我在使用 Vue 3 时遇到了同样的问题，我想在我的 router/index.js 中使用 sweetalert2 在用户转到未经授权的路由时添加警报。

如果你想在store/index.js中调用一个从后端获取数据的动作后使用sweetalert2，也会出现同样的问题。

要解决这个问题，你必须使用sweetalert2的原生包，然后你可以使用吞在任何.js 文件中。

顺便说一句，我不想​​安装任何外部包，所以我发现当你安装vue-sweetalert2时，本地包也会被安装（因为它是vue-sweetalert2).

解决方法

您所要做的就是：

• 保留您在main.js 中所做的（在组件内部使用 sweetalert2）。
• 在任何要使用swal的.js文件中，添加这个import Swal from 'sweetalert2/dist/sweetalert2'，现在就可以访问和使用Swal.fire({})了。

例子

我将附上一个我想做什么的例子（在我的例子中），以及我如何解决这个问题：

我的main.js 文件：

import { createApp } from 'vue';
import App from './App.vue';
import store from './store';
import router from './router';
import VueSweetalert2 from 'vue-sweetalert2';
import 'sweetalert2/dist/sweetalert2.min.css';

const app = createApp(App);

app.use(store);
app.use(router);
app.use(VueSweetalert2);

app.mount('#app');

我的router/index.js

import { createRouter, createWebHistory } from 'vue-router';
import Swal from 'sweetalert2/dist/sweetalert2';
import store from '../store/index';

const router = createRouter({
  routes: [
    // ...
  ],
});

router.beforeEach((to, from, next) => {
  if (to.matched.some((record) => record.meta['requiresAuth']) && store.state.auth.isAuthenticated === false) {
    Swal.fire({
      toast: true,
      position: 'bottom-end',
      showConfirmButton: false,
      timer: 3000,
      timerProgressBar: true,

      icon: 'error',
      title: 'Permission denied',
      text: 'You are not authenticated to access this page.'
    });

    next({
      name: 'login',
      params: { nextUrl: to.fullPath }
    });
  }

  next();
});

export default router;

Answer 2

我认为你需要先无条件地尝试， 尝试只甜警报没有：

axios.interceptors.response.use(function (response) {
    return response
}, function (error) {
    console.log(error.response.data.message)
    if (error.response.data.message === 'Unauthenticated.') {
        swal({
            title: "Session Expired",
            text: "Your session has expired. Would you like to be redirected to the login page?",
            icon: "warning",
            showCancelButton: true,
            confirmButtonColor: "#DD6B55",
            confirmButtonText: "Yes",
            closeOnConfirm: false
        }).then((result) => {
            if (result.value) {
                window.location.href = "/login"
            }
        });     
}
    return Promise.reject(error)
})

你可以试试

https://www.npmjs.com/package/vue-sweetalert2