Vue

2022.07.06

在 JS 檔案引用 Vue3 的實體


情境敘述

最近用了 axios 的攔截器,統一在發出請求跟回應時做了處理,例如針對 403 error 時,需要跳回登入頁面:

case 403:
	window.location.href = '/login'
break

但我希望在跳回登入頁之前,可以跳出一個對話框告知使用者,告知跳轉的原因,以及接下來會發生的事。

我有在 Vue3 實體註冊了一個對話框,希望能在 interceptors.js 使用,這樣就不用另外寫啦 XD

流程

修改 main.js

等等要在 interceptors.js 直接引入 app 參數,所以要匯出 app

export const app = createApp(App)

匯入 app

import { app } from '@/main.js'

使用對話框

匯入 app 之後,就能使用我在 main.js 匯入的所有元件

app.config.globalProperties.$confirm.show({
  content: '您的登入已失效,請重新登入。(Identity is Invalid, Please Login Again.)',
  text: '確定',
  onSubmit: () => { window.location.href = '/login' }
})

歡迎給我點鼓勵,讓我知道你來過 :)

1
guest
0 則留言
Inline Feedbacks
View all comments
Copyright (C) MUKI space* / Reborn Theme All Rights Reserved.